@okam/stack-ui 1.5.1 → 1.5.2

package/index.d.ts

@@ -1,6 +1,7 @@
+export { default as ThemeProvider } from './theme';
 export { default as Typography } from './components/Typography';
 export { default as Accordion } from './components/Accordion';
-export { default as Button } from './components/Button';
+export { default as Button, ButtonWithForwardRef } from './components/Button';
 export { default as ShareButton } from './components/ShareButton';
 export { default as SidePanel } from './components/SidePanel';
 export { default as Lightbox } from './components/Lightbox';
@@ -17,9 +18,10 @@ export { default as DatePicker } from './components/fields/DatePicker';
 export { default as Box, BoxWithForwardRef } from './components/Box';
 export { default as Calendar } from './components/Calendar';
 export { default as Modal } from './components/Modal';
-export { useTheme, ThemeContextProvider } from './providers/Theme';
-export { makeTheme, createThemeProvider } from './providers/Theme';
+export { makeTheme, createThemeProvider, useTheme, ThemeContextProvider } from './providers/Theme';
 export { default as useThemeContext } from './providers/Theme/hooks';
+export { useIsClient, IsClientContextProvider } from './providers/Client';
+export { useSidePanel, SidePanelContextProvider } from './providers/SidePanel';
 export type { TButtonProps } from './components/Button/interface';
 export type { TTypographyProps } from './components/Typography/interface';
 export type { TTheme, TToken, TCustomTheme, TStyle, TDefaultTheme, TStyleCollection, TStyleValue, } from './providers/Theme/interface';

package/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-3069990a.js");require("react/jsx-runtime");require("react");require("react-dom");exports.Accordion=e.Accordion;exports.ArrowRight=e.ArrowRight;exports.Box=e.Box;exports.BoxWithForwardRef=e.BoxWithForwardRef;exports.Button=e.Button;exports.Calendar=e.Calendar;exports.Checkbox=e.Checkbox;exports.Date=e.DateComponent;exports.DatePicker=e.DatePicker;exports.Icon=e.IconDispatcher;exports.Lightbox=e.Lightbox;exports.Modal=e.Modal;exports.Popover=e.PopoverButton;exports.ReactHookFormInput=e.ReactHookFormInput;exports.ReactHookFormSelect=e.ReactHookFormSelect;exports.Select=e.Select;exports.ShareButton=e.ShareButton;exports.SidePanel=e.index;exports.TextArea=e.TextArea;exports.TextInputField=e.TextInputField;exports.ThemeContextProvider=e.ThemeContextProvider;exports.Typography=e.Typography;exports.WysiwygBlock=e.WysiwygBlock;exports.createThemeProvider=e.createThemeProvider;exports.generateUtmTags=e.generateUtmTags;exports.makeTheme=e.makeTheme;exports.useFacebookShareUrl=e.useFacebookShareUrl;exports.useMailToShareUrl=e.useMailToShareUrl;exports.useTheme=e.useTheme;exports.useThemeContext=e.useThemeContext;exports.useTwitterShareUrl=e.useTwitterShareUrl;exports.useWindow=e.useWindow;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-199a230e.js");require("react");require("react/jsx-runtime");require("react-dom");exports.Accordion=e.Accordion;exports.ArrowRight=e.ArrowRight;exports.Box=e.Box;exports.BoxWithForwardRef=e.BoxWithForwardRef;exports.Button=e.Button;exports.ButtonWithForwardRef=e.ButtonWithForwardRef;exports.Calendar=e.Calendar;exports.Checkbox=e.Checkbox;exports.Date=e.DateComponent;exports.DatePicker=e.DatePicker;exports.Icon=e.IconDispatcher;exports.IsClientContextProvider=e.IsClientContextProvider;exports.Lightbox=e.Lightbox;exports.Modal=e.Modal;exports.Popover=e.PopoverButton;exports.ReactHookFormInput=e.ReactHookFormInput;exports.ReactHookFormSelect=e.ReactHookFormSelect;exports.Select=e.Select;exports.ShareButton=e.ShareButton;exports.SidePanel=e.index$1;exports.SidePanelContextProvider=e.SidePanelContextProvider;exports.TextArea=e.TextArea;exports.TextInputField=e.TextInputField;exports.ThemeContextProvider=e.ThemeContextProvider;exports.ThemeProvider=e.index;exports.Typography=e.Typography;exports.WysiwygBlock=e.WysiwygBlock;exports.createThemeProvider=e.createThemeProvider;exports.generateUtmTags=e.generateUtmTags;exports.makeTheme=e.makeTheme;exports.useFacebookShareUrl=e.useFacebookShareUrl;exports.useIsClient=e.useIsClient;exports.useMailToShareUrl=e.useMailToShareUrl;exports.useSidePanel=e.useSidePanel;exports.useTheme=e.useTheme;exports.useThemeContext=e.useThemeContext;exports.useTwitterShareUrl=e.useTwitterShareUrl;exports.useWindow=e.useWindow;

package/index.mjs

@@ -1,38 +1,44 @@
-import { A as t, b as i, h, j as m, B as c, k as n, C as l, D as T, g as u, I as d, L as p, M as x, P as k, f as S, R as g, c as B, S as P, a as w, d as C, e as F, l as R, T as b, W as y, n as A, p as I, m as U, r as W, s as f, u as v, o as D, t as M, q as H } from "./index-c159b0a6.mjs";
-import "react/jsx-runtime";
+import { A as t, d as i, k as n, l as h, B as d, b as l, m, C as u, D as c, j as T, I as x, s as P, L as p, M as S, P as C, h as k, R as g, e as v, S as w, c as B, v as F, f as I, g as R, p as y, a as W, T as b, W as f, o as A, w as U, n as D, y as M, r as H, z as L, t as j, u as q, q as z, E, x as G } from "./index-e5c829b7.mjs";
 import "react";
+import "react/jsx-runtime";
 import "react-dom";
 export {
   t as Accordion,
   i as ArrowRight,
-  h as Box,
-  m as BoxWithForwardRef,
-  c as Button,
-  n as Calendar,
-  l as Checkbox,
-  T as Date,
-  u as DatePicker,
-  d as Icon,
+  n as Box,
+  h as BoxWithForwardRef,
+  d as Button,
+  l as ButtonWithForwardRef,
+  m as Calendar,
+  u as Checkbox,
+  c as Date,
+  T as DatePicker,
+  x as Icon,
+  P as IsClientContextProvider,
   p as Lightbox,
-  x as Modal,
-  k as Popover,
-  S as ReactHookFormInput,
+  S as Modal,
+  C as Popover,
+  k as ReactHookFormInput,
   g as ReactHookFormSelect,
-  B as Select,
-  P as ShareButton,
-  w as SidePanel,
-  C as TextArea,
-  F as TextInputField,
-  R as ThemeContextProvider,
+  v as Select,
+  w as ShareButton,
+  B as SidePanel,
+  F as SidePanelContextProvider,
+  I as TextArea,
+  R as TextInputField,
+  y as ThemeContextProvider,
+  W as ThemeProvider,
   b as Typography,
-  y as WysiwygBlock,
+  f as WysiwygBlock,
   A as createThemeProvider,
-  I as generateUtmTags,
-  U as makeTheme,
-  W as useFacebookShareUrl,
-  f as useMailToShareUrl,
-  v as useTheme,
-  D as useThemeContext,
-  M as useTwitterShareUrl,
-  H as useWindow
+  U as generateUtmTags,
+  D as makeTheme,
+  M as useFacebookShareUrl,
+  H as useIsClient,
+  L as useMailToShareUrl,
+  j as useSidePanel,
+  q as useTheme,
+  z as useThemeContext,
+  E as useTwitterShareUrl,
+  G as useWindow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/stack-ui",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "main": "./index.js",
   "types": "./index.d.ts",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "react-hook-form": "7.43.0",
     "react-i18next": "12.1.5",
     "react-spring": "9.6.1",
-    "react-stately": "3.20.0",
+    "react-stately": "^3.24.0",
     "tailwind-variants": "^0.1.8"
   },
   "type": "module"

package/providers/Client/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { TClientProps, TClientProviderProps } from './interface';
+export declare const useIsClient: () => TClientProps, IsClientProvider: import("react").Provider<TClientProps | undefined>;
+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/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;