🙏 (#352)

Co-authored-by: hadihallak <[email protected]>
stitchesjs · Feb 12, 2021 · 14a88fa · 14a88fa
1 parent 2bddc19
commit 14a88fa
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 4 deletions.
diff --git a/packages/react/tests/types.test.tsx b/packages/react/tests/types.test.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
-import createStyled, { StitchesCss } from '../types/index.d'
+import createStyled, { StitchesCss, StitchesVariants } from '../types/index.d'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import type * as Polymorphic from '@radix-ui/react-polymorphic'
 
 const factory = createStyled({
  theme: {
@@ -59,6 +61,63 @@ type CSS = StitchesCss<typeof factory>
 
 export const { styled, toString, theme, css, keyframes, global, config } = factory
 
+const RComponent: React.FC<{ hola?: 'hi' | 'hello' }> = () => {
+ return null
+}
+
+const StyledSeparator = styled(SeparatorPrimitive.Root, {
+ border: 'none',
+ margin: 0,
+ flexShrink: 0,
+ backgroundColor: '$gray500',
+ cursor: 'default',
+ variants: {
+ size: {
+ '1': {
+ '&[data-orientation="horizontal"]': {
+ height: '1px',
+ width: '$3',
+ },
+ '&[data-orientation="vertical"]': {
+ width: '1px',
+ height: '$3',
+ },
+ },
+ '2': {
+ '&[data-orientation="horizontal"]': {
+ height: '1px',
+ width: '$7',
+ },
+ '&[data-orientation="vertical"]': {
+ width: '1px',
+ height: '$7',
+ },
+ },
+ },
+ },
+})
+
+type SeparatorVariants = StitchesVariants<typeof StyledSeparator>
+type SeparatorOwnProps = Polymorphic.OwnProps<typeof SeparatorPrimitive.Root> & { css?: CSS } & SeparatorVariants
+type SeparatorComponent = Polymorphic.ForwardRefComponent<Polymorphic.IntrinsicElement<typeof SeparatorPrimitive.Root>, SeparatorOwnProps>
+
+export const Separator = React.forwardRef((props, forwardedRef) => {
+ return <StyledSeparator {...props} ref={forwardedRef} />
+}) as SeparatorComponent
+
+const Test0 = (
+ <StyledSeparator
+ as="a"
+ href=""
+ onMouseDown={(e) => {}}
+ onClick={(e) => {
+ console.log(e)
+ }}
+ css={{ backdropFilter: 'inherit', background: 'ActiveCaption' }}
+ >
+ hello
+ </StyledSeparator>
+)
 // token:
 theme.colors.gray100.scale
 theme.colors.gray100.value
@@ -151,7 +210,7 @@ export function ExtendedButtonUsingReactUtilsWithInternalInlineAs(props: React.C
  return <Button as={(_props) => <a {..._props} />} />
 }
 
-/* -------------------------------------------------------------------------------------------------
+/* --------------------------------------------------now it's not likeikng -----------------------------------------------
  * Extended Polymorphic Button
  * -----------------------------------------------------------------------------------------------*/
 

diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
@@ -31,8 +31,21 @@ export interface StitchesComponent<DefaultElement, Variants = {}, Conditions = {
  css?: InternalCSS<Conditions, Theme, Utils, ThemeMap>
  } & VariantsCall<Variants, Conditions>
  > {
- <M extends string>(props: NativeStitchesPropsWithAs<M, Variants, Conditions, Theme, Utils>): JSX.Element
- <As extends React.ComponentType>(props: StitchesPropsWithAs<As, Variants, Conditions, Theme, Utils>): JSX.Element
+ <Elm extends string>(
+ props: VariantsCall<Variants, Conditions> & { as: Elm } & Omit<JSX.IntrinsicElements[Elm extends IntrinsicElementsKeys ? Elm : never], keyof Variants | 'css' | 'as'> & {
+ css?: InternalCSS<Conditions, Theme, Utils, ThemeMap>
+ },
+ ): JSX.Element
+ <As extends React.ComponentType>(
+ props: VariantsCall<Variants, Conditions> & { as?: As } & Omit<React.ComponentPropsWithRef<ComponentInfer<As>>, keyof Variants | 'css' | 'as'> & {
+ css?: InternalCSS<Conditions, Theme, Utils, ThemeMap>
+ },
+ ): JSX.Element
+ <As>(
+ props: VariantsCall<Variants, Conditions> & { as?: As } & Omit<React.ComponentPropsWithRef<ComponentInfer<As>>, keyof Variants | 'css' | 'as'> & {
+ css?: InternalCSS<Conditions, Theme, Utils, ThemeMap>
+ },
+ ): JSX.Element
  (
  props: VariantsCall<Variants, Conditions> & { as?: DefaultElement } & Omit<React.ComponentPropsWithRef<ComponentInfer<DefaultElement>>, keyof Variants | 'css' | 'as'> & {
  css?: InternalCSS<Conditions, Theme, Utils, ThemeMap>