ownui-system 0.0.8 → 0.0.11

package/README.md

@@ -17,6 +17,10 @@ npx tailwindcss init -p
 - configure tailwind.config
 
 ```
+const plugin = require("tailwindcss/plugin");
+const { colors, twTypographyMap } = require("ownui-system");
+
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -24,8 +28,15 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    colors,
     extend: {},
   },
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      // Add your custom styles here
+      addUtilities(twTypographyMap, ["responsive", "hover"]);
+    }),
+  ],
 };
 
 ```
@@ -59,8 +70,15 @@ export default {
     "./node_modules/ownui-system/dist/**/*.{js,jsx,ts,tsx}"
   ],
   theme: {
+    colors,
     extend: {},
   },
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      // Add your custom styles here
+      addUtilities(twTypographyMap, ["responsive", "hover"]);
+    }),
+  ],
 };
 
 ```
@@ -88,6 +106,6 @@ export default {
 - [x] BottomSheet
 - [x] Pagination
 - [x] Switch
+- [x] Radio / RadioGroup
 - [ ] Tooltip
-- [ ] Radio / RadioGroup
 - [ ] Step

package/dist/components/Dropdown/dropdown-context.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
 type DropdownContextValue = {
     isOpen: boolean;
-    selectedItem?: string;
+    selectedItem?: {
+        name: string;
+        value: string;
+    };
     color?: string;
-    onSelect: (name: string) => void;
+    onSelect: (name: string, value: string) => void;
     onOpenChange: (isOpen: boolean) => void;
 };
 declare function useContext(): DropdownContextValue;
-export declare function useDropdownContext(): {
+export default function useDropdownContext(): {
     DropdownProvider: import("react").Provider<DropdownContextValue | undefined>;
     useContext: typeof useContext;
     Context: import("react").Context<DropdownContextValue | undefined>;

package/dist/components/Dropdown/dropdown-header.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+declare function DropdownHeader({ ...rest }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export default DropdownHeader;

package/dist/components/Dropdown/dropdown-item.d.ts

@@ -2,8 +2,10 @@
 type DropdownItemProps = {
     className?: string;
     value: string;
+    name: string;
     children: React.ReactNode;
     disabled?: boolean;
-};
-declare function DropdownItem({ children, value, className, disabled, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+    right?: React.ReactNode;
+} & React.ComponentProps<"li">;
+declare function DropdownItem({ children, value, className, disabled, name, ...rest }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
 export default DropdownItem;

package/dist/components/Dropdown/dropdown.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
-interface DropdownProps {
-    selectedItem: string;
-    trigger: React.ReactNode;
-    content?: React.ReactNode;
+import { PropsWithChildren } from "react";
+interface DropdownProps extends PropsWithChildren {
+    selectedItem: {
+        name: string;
+        value: string;
+    };
     color?: string;
-    onSelect: (name: string) => void;
+    onSelect: (name: string, value: string) => void;
 }
-declare function Dropdown({ trigger, content, selectedItem, color, onSelect, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown({ children, selectedItem, color, onSelect }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/dist/components/Dropdown/hook/useDropdown.d.ts

@@ -1,17 +1,23 @@
 type UseDropdownProps = {
     isOpen: boolean;
-    selectedItem: string;
+    selectedItem: {
+        name: string;
+        value: string;
+    };
     color?: string;
-    onSelect: (name: string) => void;
+    onSelect: (name: string, value: string) => void;
     onOpen?: () => void;
     onClose?: () => void;
     onOpenChange: (isOpen: boolean) => void;
 };
 declare function useDropdown({ isOpen, selectedItem, color, onOpen, onClose, onSelect, onOpenChange, }: UseDropdownProps): {
     isOpen: boolean;
-    selectedItem: string;
+    selectedItem: {
+        name: string;
+        value: string;
+    };
     color: string | undefined;
-    onSelect: (name: string) => void;
+    onSelect: (name: string, value: string) => void;
     onOpenChange: (isOpen: boolean) => void;
 };
 export default useDropdown;

package/dist/components/Dropdown/index.d.ts

@@ -1,3 +1,2 @@
 export { default as Dropdown } from "./dropdown";
-export { default as DropdownBody } from "./dropdown-body";
 export { default as DropdownItem } from "./dropdown-item";

package/dist/components/Radio/Radio.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { RadioItemProps } from "./radio-item";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<RadioItemProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomRadio: Story;

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import RadioGroup from "./radio-group";
+declare const Radio: {
+    Group: typeof RadioGroup;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("./radio-item").RadioItemProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+export default Radio;

package/dist/components/Radio/radio-context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type RadioContextValue = {
+    activeColor: string;
+};
+declare function useContext(): RadioContextValue;
+export default function useRadioContext(): {
+    RadioProvider: import("react").Provider<RadioContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<RadioContextValue | undefined>;
+};
+export {};

package/dist/components/Radio/radio-group.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+interface RadioGroupProps extends PropsWithChildren {
+    className?: string;
+    activeColor?: string;
+}
+declare function RadioGroup({ className, children, activeColor, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export default RadioGroup;

package/dist/components/Radio/radio-item.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+export type RadioItemProps = {
+    name: string;
+    id: string;
+    activeColor?: string;
+    value?: string;
+} & ComponentProps<"input">;
+declare const RadioItem: import("react").ForwardRefExoticComponent<Omit<RadioItemProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export default RadioItem;

package/dist/components/Radio/radio-style.d.ts

@@ -0,0 +1,4 @@
+export declare const labelStyle = "relative flex align-middle font-semibold";
+export declare const itemBaseStyle = "relative w-5 h-5 flex items-center justify-center rounded-full border-[2px] border-gray-400 left-0 top-[2px]";
+export declare const itemAfterStyle = "after:transition-all after:contents-[''] after:scale-0 after:bg-gray-900 after:w-3 after:h-3 after:absolute after:rounded-full";
+export declare const itemCheckedStyle = "peer-checked:w-5 peer-checked:h-5 peer-checked:after:scale-75 peer-checked:border-gray-900";

package/dist/components/Tab/Tab.stories.d.ts

@@ -1,8 +1,8 @@
 import type { StoryObj } from "@storybook/react";
-import Tab from ".";
+import TabItem from "./tab-item";
 declare const meta: {
     title: string;
-    component: typeof Tab;
+    component: typeof TabItem;
     parameters: {
         layout: string;
     };
@@ -12,5 +12,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Box: Story;
-export declare const TextTabGroup: Story;
-export declare const BoxTabGroup: Story;
+export declare const TextTab: Story;
+export declare const BoxTab: Story;

package/dist/components/Tab/Tab.style.d.ts

@@ -1,12 +1,12 @@
-export declare const baseStyle: {
+export declare const baseStyles: {
     text: string;
     box: string;
 };
-export declare const activeStyle: {
+export declare const activeStyles: {
     text: string;
     box: string;
 };
-export declare const tabSize: {
+export declare const tabSizeStyles: {
     text: {
         large: string;
         medium: string;
@@ -18,11 +18,11 @@ export declare const tabSize: {
         small: string;
     };
 };
-export declare const tabGroupBaseStyle: {
+export declare const tabGroupBaseStyles: {
     text: string;
     box: string;
 };
-export declare const tabGroupGap: {
+export declare const tabGroupGapStyles: {
     large: string;
     medium: string;
     small: string;

package/dist/components/Tab/index.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
-interface TabProps {
-    children: React.ReactNode;
-    active?: boolean;
-    className?: string;
-    onClick?: () => void;
-}
-declare function Tab({ children, active, onClick }: TabProps): import("react/jsx-runtime").JSX.Element;
+import TabGroup from "./tab-group";
+import TabItem from "./tab-item";
+declare const Tab: {
+    Item: typeof TabItem;
+    Group: typeof TabGroup;
+};
 export default Tab;

package/dist/components/Tab/tab-item.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface TabProps {
+    children: React.ReactNode;
+    active?: boolean;
+    className?: string;
+    onClick?: () => void;
+}
+declare function TabItem({ children, active, onClick }: TabProps): import("react/jsx-runtime").JSX.Element;
+export default TabItem;