@okam/stack-ui 1.6.1 → 1.6.2

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@okam/stack-ui",
-  "version": "1.6.1",
-  "types": "./src/index.d.ts",
+  "main": "./index.js",
+  "version": "1.6.2",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "repository": {
     "url": "https://github.com/OKAMca/stack.git"
   },
-  "module": "./index.js",
-  "main": "./index.js",
-  "type": "module",
-  "dependencies": {},
-  "peerDependencies": {
+  "dependencies": {
     "@internationalized/date": "3.4.0",
-    "@okam/core-lib": "1.2.0",
     "@react-aria/calendar": "3.4.0",
     "@react-aria/checkbox": "3.9.2",
     "@react-aria/datepicker": "3.5.0",
@@ -30,7 +32,8 @@
     "@react-types/dialog": "3.5.3",
     "@react-types/overlays": "3.8.1",
     "@react-types/shared": "3.19.0",
-    "@storybook/client-api": "7.0.25",
+    "@tsed/exceptions": "^6.100.3",
+    "dequal": "^2.0.0",
     "isomorphic-dompurify": "0.26.0",
     "lodash": "4.17.21",
     "lodash.isequal": "4.5.0",
@@ -41,7 +44,8 @@
     "react-hook-form": "7.43.0",
     "react-i18next": "12.1.5",
     "react-spring": "9.6.1",
-    "react-stately": "3.25.0",
-    "tailwind-variants": "0.1.10"
-  }
+    "react-stately": "^3.24.0",
+    "tailwind-variants": "^0.1.8"
+  },
+  "type": "module"
 }

package/providers/Client/index.d.ts

@@ -0,0 +1,4 @@
+import type { TClientProps, TClientProviderProps } from './interface';
+declare const useIsClient: () => TClientProps;
+export { useIsClient };
+export declare function IsClientContextProvider({ children }: TClientProviderProps): import("react/jsx-runtime").JSX.Element;

package/providers/Client/interface.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export type TClientProviderProps = {
+    children: React.ReactNode;
+};
+export type TClientProps = {
+    isClient: boolean;
+};
+export type TClientContext = {
+    isClient: boolean;
+};

package/providers/SidePanel/index.d.ts

@@ -0,0 +1,4 @@
+import type { TSidePanelContext, TSidePanelProviderProps } from './interface';
+declare const useSidePanel: () => TSidePanelContext;
+export { useSidePanel };
+export declare function SidePanelContextProvider({ children, defaultSelectedKey }: TSidePanelProviderProps): import("react/jsx-runtime").JSX.Element;

package/providers/SidePanel/interface.d.ts

@@ -0,0 +1,17 @@
+import type { OverlayTriggerState } from '@react-stately/overlays';
+import type React from 'react';
+export type TSidePanelProviderProps = {
+    children: React.ReactNode;
+    defaultSelectedKey: string;
+};
+export type TButtonProps = {
+    closeButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    closeButtonRef: React.MutableRefObject<null>;
+    openButtonProps: React.HTMLAttributes<HTMLDivElement>;
+    openButtonRef: React.MutableRefObject<null>;
+};
+export type TSidePanelContext = {
+    defaultSelectedKey: string;
+    overlayState: OverlayTriggerState;
+    buttonProps: TButtonProps;
+};

package/providers/Theme/hooks.d.ts

@@ -0,0 +1,3 @@
+import type { TCustomTheme, TToken } from './interface';
+declare const useThemeContext: (func?: string | null, props?: TToken, customTheme?: TCustomTheme) => string | undefined;
+export default useThemeContext;

package/providers/Theme/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { TThemeProviderProps, TThemePanelContext, TTheme } from './interface';
+export declare function createCtxNullable<A extends Record<string, unknown> | null>(): readonly [() => A | null, React.Provider<A | undefined>];
+declare const useTheme: () => TThemePanelContext<TTheme> | null;
+export declare function ThemeContextProvider({ children, brandTheme }: TThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const createThemeProvider: (brandTheme: TTheme) => ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { useTheme };
+export { makeTheme } from './utils';

package/providers/Theme/interface.d.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+export type TStyleValue = false | string;
+export type TToken = Record<string, string | boolean>;
+export type TFunc = (props: TToken) => TStyleValue[] | string;
+export type TThemeRecord = Record<string, TFunc>;
+export type TTheme = Record<string, TFunc | TThemeRecord>;
+export type TStyle = Record<string, TStyleValue>;
+export type TCustomTheme = TStyleValue | null | undefined;
+export type TStyleCollection = Record<string, TStyle>;
+export type TDefaultTheme = {
+    typography: (props: TToken) => TStyleValue[] | string;
+};
+export type TThemeProviderProps<T = TTheme> = {
+    children: React.ReactNode;
+    brandTheme?: T;
+};
+export type TThemePanelContext<T = TTheme> = {
+    brandTheme: T;
+};
+export interface ITheme {
+    defaultTokens: TToken;
+    styles: TStyleCollection;
+}

package/providers/Theme/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TTheme } from './interface';
+export declare const makeTheme: (theme: TTheme) => TTheme;

package/theme/Accordion/index.d.ts

@@ -0,0 +1,154 @@
+export declare const accordionContainer: import("tailwind-variants").TVReturnType<{
+    textAlign: {
+        center: "text-center";
+        left: "text-left";
+    };
+}, undefined, "[border-radius: 32px] p-1.5 focus:outline-none text-color-1-500", import("tailwind-variants/dist/config").TVConfig<{
+    textAlign: {
+        center: "text-center";
+        left: "text-left";
+    };
+}, {
+    textAlign: {
+        center: "text-center";
+        left: "text-left";
+    };
+}>, {
+    textAlign: {
+        center: "text-center";
+        left: "text-left";
+    };
+}, undefined>;
+export declare const accordionButton: import("tailwind-variants").TVReturnType<{
+    titleBold: {
+        true: "font-bold";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0";
+        left: "grid-cols-[1fr_3rem]";
+    };
+}, undefined, "grid overflow-hidden w-full items-center border-b-2 border-color-1-500", import("tailwind-variants/dist/config").TVConfig<{
+    titleBold: {
+        true: "font-bold";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0";
+        left: "grid-cols-[1fr_3rem]";
+    };
+}, {
+    titleBold: {
+        true: "font-bold";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0";
+        left: "grid-cols-[1fr_3rem]";
+    };
+}>, {
+    titleBold: {
+        true: "font-bold";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] pl-0 sm:pl-0";
+        left: "grid-cols-[1fr_3rem]";
+    };
+}, undefined>;
+export declare const accordionTitle: import("tailwind-variants").TVReturnType<{
+    textAlign: {
+        center: "justify-self-center col-start-2";
+        left: "justify-self-start";
+    };
+}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
+    textAlign: {
+        center: "justify-self-center col-start-2";
+        left: "justify-self-start";
+    };
+}, {
+    textAlign: {
+        center: "justify-self-center col-start-2";
+        left: "justify-self-start";
+    };
+}>, {
+    textAlign: {
+        center: "justify-self-center col-start-2";
+        left: "justify-self-start";
+    };
+}, undefined>;
+export declare const accordionIcon: import("tailwind-variants").TVReturnType<{
+    isOpen: {
+        true: "-rotate-90";
+        false: "";
+    };
+}, undefined, "text-color-1-500 min-h-12 rotate-90 min-w-12 rounded-full flex items-center justify-center transition duration-500 transform ml-auto aspect-square", import("tailwind-variants/dist/config").TVConfig<{
+    isOpen: {
+        true: "-rotate-90";
+        false: "";
+    };
+}, {
+    isOpen: {
+        true: "-rotate-90";
+        false: "";
+    };
+}>, {
+    isOpen: {
+        true: "-rotate-90";
+        false: "";
+    };
+}, undefined>;
+export declare const accordionRegion: import("tailwind-variants").TVReturnType<{
+    isOpen: {
+        true: "pb-8 pt-3 grid-rows-[1fr]";
+        false: "";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] px-6 text-center";
+        left: "grid-cols-[1fr_3rem] text-left";
+    };
+}, undefined, "font-body text-inherit h-auto grid grid-rows-[0fr] transition-all duration-500", import("tailwind-variants/dist/config").TVConfig<{
+    isOpen: {
+        true: "pb-8 pt-3 grid-rows-[1fr]";
+        false: "";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] px-6 text-center";
+        left: "grid-cols-[1fr_3rem] text-left";
+    };
+}, {
+    isOpen: {
+        true: "pb-8 pt-3 grid-rows-[1fr]";
+        false: "";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] px-6 text-center";
+        left: "grid-cols-[1fr_3rem] text-left";
+    };
+}>, {
+    isOpen: {
+        true: "pb-8 pt-3 grid-rows-[1fr]";
+        false: "";
+    };
+    textAlign: {
+        center: "grid-cols-[3rem_1fr_3rem] px-6 text-center";
+        left: "grid-cols-[1fr_3rem] text-left";
+    };
+}, undefined>;
+export declare const accordionContent: import("tailwind-variants").TVReturnType<{
+    textAlign: {
+        center: "col-start-2";
+        left: "";
+    };
+}, undefined, "overflow-hidden", import("tailwind-variants/dist/config").TVConfig<{
+    textAlign: {
+        center: "col-start-2";
+        left: "";
+    };
+}, {
+    textAlign: {
+        center: "col-start-2";
+        left: "";
+    };
+}>, {
+    textAlign: {
+        center: "col-start-2";
+        left: "";
+    };
+}, undefined>;

package/theme/Box/index.d.ts

@@ -0,0 +1,100 @@
+export declare const main: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "w-full bg-slate-100"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "w-full bg-slate-100">;
+    } | undefined;
+} | {}, undefined, "w-full bg-slate-100", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "w-full bg-slate-100"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "w-full bg-slate-100"> | {}, undefined>;
+export declare const container: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+    spacing: {
+        small: "mb-3";
+        medium: "mb-6";
+        large: "mb-8";
+        none: "mb-0";
+    };
+}, undefined, "max-w-screen-lg mx-auto w-full", import("tailwind-variants/dist/config").TVConfig<{
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+    spacing: {
+        small: "mb-3";
+        medium: "mb-6";
+        large: "mb-8";
+        none: "mb-0";
+    };
+}, {
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+    spacing: {
+        small: "mb-3";
+        medium: "mb-6";
+        large: "mb-8";
+        none: "mb-0";
+    };
+}>, {
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+    spacing: {
+        small: "mb-3";
+        medium: "mb-6";
+        large: "mb-8";
+        none: "mb-0";
+    };
+}, undefined>;
+export declare const grid: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+}, undefined, "grid grid-cols-12 gap-6 px-4 col-span-full", import("tailwind-variants/dist/config").TVConfig<{
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+}, {
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+    spacing: {
+        small: "mb-3";
+        medium: "mb-6";
+        large: "mb-8";
+        none: "mb-0";
+    };
+}>, {
+    fullWidth: {
+        true: "max-w-full col-span-full p-0";
+    };
+    spacing: {
+        small: "mb-3";
+        medium: "mb-6";
+        large: "mb-8";
+        none: "mb-0";
+    };
+}, undefined>;
+export declare const gridItem: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: "col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4";
+        medium: "col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8";
+        large: "lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13";
+    };
+}, undefined, "bg-slate-300 h-64 p-4 flex justify-start items-end", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        small: "col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4";
+        medium: "col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8";
+        large: "lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13";
+    };
+}, {
+    size: {
+        small: "col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4";
+        medium: "col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8";
+        large: "lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13";
+    };
+}>, {
+    size: {
+        small: "col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4";
+        medium: "col-span-12 sm:col-span-12 md:col-span-8 lg:col-span-8";
+        large: "lg:col-start-3 sm:col-start-1 sm:col-end-13 lg:col-end-11 md:col-start-3 md:col-end-11 col-start-1 col-end-13";
+    };
+}, undefined>;

package/theme/Button/index.d.ts

@@ -0,0 +1,70 @@
+declare const button: import("tailwind-variants").TVReturnType<{
+    buttonStyle: {
+        default: "\n            px-4\n            py-2\n            text-white\n            !bg-color-1-500 \n            hover:!bg-color-1-400\n            active:!bg-color-1-400\n          ";
+        outline: "\n            px-4\n            py-2\n            bg-transparent\n            !border-color-1-500\n            text-color-1-500\n            hover:bg-color-1-500\n            hover:text-white\n            active:bg-color-1-500\n            active:text-white\n          ";
+        hollow: "\n            px-2\n            bg-transparent\n            text-color-1-500\n            hover:border-b-color-1-500\n            active:border-b-color-1-500\n            focus:border-b-color-1-500\n    \n          ";
+    };
+    intent: {
+        error: "\n            !bg-error \n            text-white \n            pointer-events-none\n            !border-error\n          ";
+    };
+    size: {
+        default: "min-w-12 min-h-6";
+        large: "min-w-36 min-h-18";
+    };
+    shape: {
+        rounded: "rounded-md";
+        circular: "rounded-full";
+    };
+}, undefined, "\n    flex\n    items-center\n    justify-center\n    gap-4\n    transition\n    duration-300\n    ease-in-out\n    disabled:pointer-events-none\n    disabled:opacity-30\n    focus:outline-0\n    border-transparent \n    border-2\n    focus:border-black\n  ", import("tailwind-variants/dist/config").TVConfig<{
+    buttonStyle: {
+        default: "\n            px-4\n            py-2\n            text-white\n            !bg-color-1-500 \n            hover:!bg-color-1-400\n            active:!bg-color-1-400\n          ";
+        outline: "\n            px-4\n            py-2\n            bg-transparent\n            !border-color-1-500\n            text-color-1-500\n            hover:bg-color-1-500\n            hover:text-white\n            active:bg-color-1-500\n            active:text-white\n          ";
+        hollow: "\n            px-2\n            bg-transparent\n            text-color-1-500\n            hover:border-b-color-1-500\n            active:border-b-color-1-500\n            focus:border-b-color-1-500\n    \n          ";
+    };
+    intent: {
+        error: "\n            !bg-error \n            text-white \n            pointer-events-none\n            !border-error\n          ";
+    };
+    size: {
+        default: "min-w-12 min-h-6";
+        large: "min-w-36 min-h-18";
+    };
+    shape: {
+        rounded: "rounded-md";
+        circular: "rounded-full";
+    };
+}, {
+    buttonStyle: {
+        default: "\n            px-4\n            py-2\n            text-white\n            !bg-color-1-500 \n            hover:!bg-color-1-400\n            active:!bg-color-1-400\n          ";
+        outline: "\n            px-4\n            py-2\n            bg-transparent\n            !border-color-1-500\n            text-color-1-500\n            hover:bg-color-1-500\n            hover:text-white\n            active:bg-color-1-500\n            active:text-white\n          ";
+        hollow: "\n            px-2\n            bg-transparent\n            text-color-1-500\n            hover:border-b-color-1-500\n            active:border-b-color-1-500\n            focus:border-b-color-1-500\n    \n          ";
+    };
+    intent: {
+        error: "\n            !bg-error \n            text-white \n            pointer-events-none\n            !border-error\n          ";
+    };
+    size: {
+        default: "min-w-12 min-h-6";
+        large: "min-w-36 min-h-18";
+    };
+    shape: {
+        rounded: "rounded-md";
+        circular: "rounded-full";
+    };
+}>, {
+    buttonStyle: {
+        default: "\n            px-4\n            py-2\n            text-white\n            !bg-color-1-500 \n            hover:!bg-color-1-400\n            active:!bg-color-1-400\n          ";
+        outline: "\n            px-4\n            py-2\n            bg-transparent\n            !border-color-1-500\n            text-color-1-500\n            hover:bg-color-1-500\n            hover:text-white\n            active:bg-color-1-500\n            active:text-white\n          ";
+        hollow: "\n            px-2\n            bg-transparent\n            text-color-1-500\n            hover:border-b-color-1-500\n            active:border-b-color-1-500\n            focus:border-b-color-1-500\n    \n          ";
+    };
+    intent: {
+        error: "\n            !bg-error \n            text-white \n            pointer-events-none\n            !border-error\n          ";
+    };
+    size: {
+        default: "min-w-12 min-h-6";
+        large: "min-w-36 min-h-18";
+    };
+    shape: {
+        rounded: "rounded-md";
+        circular: "rounded-full";
+    };
+}, undefined>;
+export default button;