New feat

.changeset/chilled-balloons-doubt.md

@@ -0,0 +1,5 @@
+---
+'@crossed/core': patch
+---
+
+add extends type in compounVariants

.changeset/rotten-owls-wave.md

@@ -0,0 +1,5 @@
+---
+'@crossed/styled': minor
+---
+
+add hoverTheme, focusTheme and activeTheme

.changeset/seven-cobras-fly.md

@@ -0,0 +1,5 @@
+---
+'@crossed/styled': minor
+---
+
+split export for seperate styled

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "tailwindCSS.experimental.classRegex": [
-    ["className: ?([^;]*)[;]", "[`'\"`]([^'\"`,;]*)[`'\"`]"]
-  ],
-  "mdx.experimentalLanguageServer": true
+    ["className: ?([^;]*)[;]", "[`'\"`]([^'\"`,;]*)[`'\"`]"],
+  ]
 }

apps/docs/pages/_app.mdx

@@ -1,6 +1,6 @@
 import 'raf/polyfill';
 import '../styles/global.css';
-import { CrossedTheme } from '@crossed/ui';
+import { CrossedTheme } from '@crossed/ui/src/Provider';
 import { PortalProvider } from '@gorhom/portal';
 
 export default function App({ Component, pageProps }) {

apps/docs/pages/primitive/createBadge.mdx

@@ -2,24 +2,55 @@ import { CreateBadgeSimpleDemo } from '@crossed/demo';
 import { CodeDemo } from 'components/CodeDemo';
 import { getStaticDemo } from 'components/getStaticDemo';
 import { Tabs } from 'components/Tabs';
+import { Table } from 'components/Table';
 
 export const getStaticProps = async (e) => {
   return {
     props: {
       ssg: {
-        simple: (await getStaticDemo('primitive/createBadge/simple')(e)).props.ssg.code,
-      }
-    }
-  }
+        simple: (await getStaticDemo('primitive/createBadge/simple')(e)).props
+          .ssg.code,
+      },
+    },
+  };
 };
 
 # createBadge
 
-<Tabs items={['Demo']}>
+<Tabs items={['Demo', "Doc"]}>
   <Tabs.Tab>
     ## simple
     <br />
     <CodeDemo Demo={CreateBadgeSimpleDemo} name="simple" />
+  </Tabs.Tab>
+
+  <Tabs.Tab>
+    ## Usage
+    ```tsx
+      import type { ComponentProps } from "react";
+      import { createBadge } from "@crossed/primitive";
+
+      const Badge = createBadge({
+        Root: (props: ComponentProps<"div">) => <div {...props} />,
+        Text: (props: ComponentProps<"p">) => <p {...props} />,
+      })
+
+      const { Text } = Badge;
+
+      function App() {
+        return (
+          <Badge>
+            <Text>
+              Hello
+            </Text>
+          </Badge>
+        );
+      }
+    ```
+    <Table props={[
+      ["Root", "ComponentType", "", "Root of badge"],
+      ["Text", "ComponentType", "", "Text of badge"],
+    ]} />
 
   </Tabs.Tab>
 </Tabs>

apps/docs/pages/primitive/createButton.mdx

@@ -14,14 +14,11 @@ export const getStaticProps = async (e) => {
   return {
     props: {
       ssg: {
-        codeSimple: (await getStaticDemo('primitive/createButton/simple')(e))
-          .props.ssg.code,
         codeSimpleNative: (
           await getStaticDemo('primitive/createButton/simple.native')(e)
         ).props.ssg.code,
-        codeGroup: (
-          await getStaticDemo('primitive/createButton/group')(e)
-        ).props.ssg.code,
+        codeGroup: (await getStaticDemo('primitive/createButton/group')(e))
+          .props.ssg.code,
       },
     },
   };
@@ -32,28 +29,32 @@ export const getStaticProps = async (e) => {
 <Tabs items={['Demo', 'Anatomy', 'Props']}>
   <Tabs.Tab>
     ## Simple
-    <Tabs items={['Web', 'Native']}>
-      <Tabs.Tab>
-        <CodeDemo Demo={CreateButtonDemo} name="codeSimple" />
-      </Tabs.Tab>
-      <Tabs.Tab>
-        <CodeDemo Demo={CreateButtonNativeDemo} name="codeSimpleNative" />
-      </Tabs.Tab>
-    </Tabs>
+    <CodeDemo Demo={CreateButtonNativeDemo} name="codeSimpleNative" />
 
     ## Group
     <CodeDemo Demo={CreateButtonGroupDemo} name="codeGroup" />
+
   </Tabs.Tab>
   <Tabs.Tab>
     ```tsx
-    <Button>
-      <Button.Text />
-      <Button.Icon />
-    </Button>
+    import { createButton } from "@crossed/primitive/createButton"
+    const Button = createButton(/* ... */);
+
+    <Button.Group>
+      <Button>
+        <Button.Text />
+        <Button.Icon />
+      </Button>
+    </Button.Group>
     ```
   </Tabs.Tab>
   <Tabs.Tab>
     ## Button
-    <Table props={[]} />
+    <Table props={[
+      ["Root", "ComponentType", "", "Root of button"],
+      ["Group", "ComponentType", "", "Element which wrap all button"],
+      ["Text", "ComponentType", "", "Text of button"],
+      ["Icon", "ComponentType", "", "Icon of button"],
+    ]} />
   </Tabs.Tab>
 </Tabs>

apps/docs/pages/primitive/createLabel.mdx

@@ -1,5 +1,4 @@
 import {
-  CreateLabelSimpleDemo,
   CreateLabelSimpleNativeDemo,
 } from '@crossed/demo';
 import { CodeDemo } from 'components/CodeDemo';
@@ -11,8 +10,6 @@ export const getStaticProps = async (e) => {
   return {
     props: {
       ssg: {
-        simple: (await getStaticDemo('primitive/createLabel/simple')(e)).props
-          .ssg.code,
         simpleNative: (
           await getStaticDemo('primitive/createLabel/simple.native')(e)
         ).props.ssg.code,
@@ -26,14 +23,7 @@ export const getStaticProps = async (e) => {
 <Tabs items={['Demo', 'Anatomy', 'Props']}>
   <Tabs.Tab>
     ## simple
-    <Tabs items={['Web', 'Native']}>
-      <Tabs.Tab>
-        <CodeDemo Demo={CreateLabelSimpleDemo} name="simple" />
-      </Tabs.Tab>
-      <Tabs.Tab>
-        <CodeDemo Demo={CreateLabelSimpleNativeDemo} name="simpleNative" />
-      </Tabs.Tab>
-    </Tabs>
+    <CodeDemo Demo={CreateLabelSimpleNativeDemo} name="simpleNative" />
   </Tabs.Tab>
   <Tabs.Tab>
     ```tsx

apps/docs/pages/styled/base.mdx

@@ -105,6 +105,9 @@ You can manage state from parent with `states` props added to component styled
   </TabNext>
 </TabsNext>
 
+### Disbaled state
+You can disable state with `hoverTheme`, `activeTheme`, `focusTheme`
+
 ## Color mode
 
 When you create styled component, you can specify `:dark` or `:light` keys

apps/docs/pages/styled/installation.mdx

@@ -177,8 +177,8 @@ export const Button = styled('button', {
   'className': [
     'border border-neutral-900 bg-neutral-500 rounded-md text-white',
   ],
-  ':hover': { className: 'bg-neutral-400' },
-  ':active': { className: 'bg-neutral-600' },
+  ':hover': { className: ['bg-neutral-400'] },
+  ':active': { className: ['bg-neutral-600'] },
   'variants': {
     size: {
       md: { className: ['px-3 py-2'] },

apps/docs/tailwind.config.js

@@ -7,8 +7,9 @@ module.exports = {
   content: [
     './pages/**/*.{js,jsx,ts,tsx,md,mdx}',
     './components/**/*.{js,jsx,ts,tsx,md,mdx}',
-    './node_modules/@crossed/demo/lib/**/*.{js,jsx,ts,tsx,md,mdx}',
-    './node_modules/@crossed/ui/lib/**/*.{js,jsx,ts,tsx,md,mdx}',
+    './node_modules/@crossed/demo/src/**/*.{js,jsx,ts,tsx,md,mdx}',
+    './node_modules/@crossed/ui/src/**/*.{js,jsx,ts,tsx,md,mdx}',
+    './node_modules/@crossed/primitive/src/**/*.{js,jsx,ts,tsx,md,mdx}',
     './theme.config.tsx',
   ],
   theme: {

packages/core/package.json

@@ -19,11 +19,14 @@
     "@jest/types": "28.1.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18.2.7",
+    "@types/react-native": "^0.72.2",
+    "react-native": "^0.72.3",
     "react": "^18.2.0",
     "typescript": "5.1.6"
   },
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-native": "^0.72.3"
   },
   "files": [
     "lib/",

packages/core/src/helpers.ts

@@ -0,0 +1,6 @@
+import { Platform } from 'react-native';
+
+export const isWeb = Platform.OS === 'web';
+export const isAndroid = Platform.OS === 'android';
+export const isIos = Platform.OS === 'ios';
+export const isNative = isAndroid || isIos;

packages/core/src/types.ts

@@ -77,8 +77,10 @@ export type Config<
   defaultVariants?: ConfigVariants<T> & PropsFromExtends<E>;
   extends?: E;
   compoundVariants?: (T extends ConfigSchemaUndefined<any>
-    ? (ConfigVariants<T> | ConfigVariantsMulti<P, T>) & BaseWithState<P>
-    : BaseWithState<P>)[];
+    ? (ConfigVariants<T> | ConfigVariantsMulti<P, T>) &
+        BaseWithState<P> &
+        PropsFromExtends<E>
+    : BaseWithState<P> & PropsFromExtends<E>)[];
 };
 
 export type Props<
@@ -94,7 +96,11 @@ export type StyledComponent<
   E extends StylesFunctionUndefined<P>
 > = ForwardRefExoticComponent<
   NewComponentProps<T, P, E> & RefAttributes<any>
-> & { styles: StylesFunction<Props<T, P> & PropsFromExtends<E>> };
+> & {
+  styles: StylesFunction<
+    Omit<PropsFromExtends<E>, keyof ConfigVariants<T>> & Props<T, P>
+  >;
+};
 
 export type NewComponentProps<
   T extends ConfigSchemaUndefined<P>,
@@ -106,6 +112,9 @@ export type NewComponentProps<
     className?: string;
     // animations?: boolean;
     states?: { isActive?: boolean; isFocus?: boolean; isHover?: boolean };
+    hoverTheme?: boolean;
+    activeTheme?: boolean;
+    focusTheme?: boolean;
     $dark?: Base<P>;
     $light?: Base<P>;
   };

packages/demo/src/primitive/createButton/group.tsx

@@ -1,10 +1,11 @@
 import { createButton } from '@crossed/primitive';
-import { GetProps, styled } from '@crossed/styled';
+import type { GetProps } from '@crossed/styled';
+import { styled } from '@crossed/styled';
 import { createScope } from '@crossed/core';
 import { YBox } from '@crossed/ui';
-import { Pressable, Text, TextProps } from 'react-native';
+import { Pressable, Text, TextProps, View } from 'react-native';
 
-const Group = styled(Pressable, {
+const Group = styled(View, {
   className: ['overflow-hidden', 'rounded-md'],
   variants: {
     horizontal: { true: { className: ['flex-row'] } },
@@ -35,7 +36,7 @@
   className: ['text-white'],
 });
 const IconButton = (props: TextProps) => {
   return <Text {...props} style={[{ color: 'white' }, props.style]} />;
 };
 
 const [ProviderGroup, useGroupContext] = createScope<{ grouped?: boolean }>({});

packages/demo/src/primitive/createButton/simple.native.tsx

@@ -1,27 +1,18 @@
 import { createButton } from '@crossed/primitive';
+import { styled } from '@crossed/styled';
 import { Box } from '@crossed/ui';
-import { Pressable, PressableProps, Text, TextProps } from 'react-native';
+import { Pressable, Text, TextProps } from 'react-native';
 
 const Button = createButton({
   Group: Pressable,
-  Root: (props: PressableProps) => {
-    return (
-      <Pressable
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          backgroundColor: 'blue',
-          paddingHorizontal: 12,
-          paddingVertical: 8,
-          gap: 8,
-        }}
-        {...props}
-      />
-    );
-  },
+  Root: styled(Pressable, {
+    'className': ['flex-row', 'bg-blue-500', 'rounded', 'px-3 py-2', 'gap-2'],
+    ':hover': {
+      className: ['bg-blue-400'],
+    },
+  }),
   Text: (props: TextProps) => {
     return <Text {...props} style={[{ color: 'white' }, props.style]} />;
   },
   Icon: (props: TextProps) => {
     return <Text {...props} style={[{ color: 'white' }, props.style]} />;

packages/demo/src/primitive/createButton/simple.tsx

@@ -1,5 +1,5 @@
 import { createButton } from '@crossed/primitive';
-import { styled } from '@crossed/styled/src';
+import { styled } from '@crossed/styled';
 import { Box } from '@crossed/ui';
 import type { HTMLAttributes } from 'react';
 import { Pressable } from 'react-native';

packages/demo/src/primitive/createInput/simple.tsx

@@ -1,5 +1,5 @@
 import { createInput } from '@crossed/primitive';
-import { styled } from '@crossed/styled/src';
+import { styled } from '@crossed/styled';
 import { Button, YBox } from '@crossed/ui';
 import { Pressable, Text, TextInput, View } from 'react-native';
 

packages/demo/src/styled/button/CompoundVariants.native.tsx

@@ -1,4 +1,5 @@
-import { type GetProps, styled } from '@crossed/styled';
+import type { GetProps } from '@crossed/styled';
+import { styled } from '@crossed/styled';
 import { Pressable } from 'react-native';
 
 const Button = styled(Pressable, {

packages/demo/src/styled/button/CompoundVariants.tsx

@@ -1,4 +1,5 @@
-import { type GetProps, styled } from '@crossed/styled';
+import type { GetProps } from '@crossed/styled';
+import { styled } from '@crossed/styled';
 import { Pressable } from 'react-native';
 
 const Button = styled(Pressable, {

packages/demo/src/styled/button/DefaultVariants.native.tsx

@@ -1,4 +1,5 @@
-import { type GetProps, styled } from '@crossed/styled';
+import type { GetProps } from '@crossed/styled';
+import { styled } from '@crossed/styled';
 import { Pressable } from 'react-native';
 
 const Button = styled(Pressable, {

packages/demo/src/styled/button/DefaultVariants.tsx

@@ -1,4 +1,5 @@
-import { type GetProps, styled } from '@crossed/styled';
+import type { GetProps } from '@crossed/styled';
+import { styled } from '@crossed/styled';
 import { Pressable } from 'react-native';
 
 const Button = styled(Pressable, {

packages/demo/src/styled/button/Extends.native.tsx

@@ -1,4 +1,5 @@
-import { styled, tw } from '@crossed/styled';
+import { tw } from '@crossed/styled';
+import { styled } from '@crossed/styled';
 import { Pressable, Text, TextInput } from 'react-native';
 
 const ButtonText = styled(Text, {

packages/demo/src/styled/button/OnlyBase.native.tsx

@@ -1,5 +1,6 @@
-import { type GetProps, styled } from '@crossed/styled';
-import { Pressable } from 'react-native';
+import type { GetProps } from '@crossed/styled';
+import { styled } from '@crossed/styled';
+import { Pressable, Text } from 'react-native';
 
 const Button = styled(Pressable, {
   className: [
@@ -16,5 +17,9 @@ const Button = styled(Pressable, {
 type ButtonProps = GetProps<typeof Button>;
 
 export const ButtonOnlyBaseNativeDemo = (props: ButtonProps) => {
-  return <Button {...props}>Hello world</Button>;
+  return (
+    <Button {...props}>
+      <Text>Hello world</Text>
+    </Button>
+  );
 };