@okam/stack-ui 1.8.1 → 1.9.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@okam/stack-ui",
   "main": "./index.js",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "types": "./index.d.ts",
   "exports": {
     ".": {
@@ -16,21 +16,20 @@
     "url": "https://github.com/OKAMca/stack.git"
   },
   "dependencies": {
-    "@internationalized/date": "3.4.0",
-    "@react-aria/calendar": "3.4.1",
-    "@react-aria/checkbox": "3.10.0",
-    "@react-aria/datepicker": "3.6.0",
-    "@react-aria/focus": "3.14.0",
+    "@internationalized/date": "3.5.0",
+    "@react-aria/calendar": "3.5.0",
+    "@react-aria/checkbox": "3.11.0",
+    "@react-aria/datepicker": "3.7.0",
+    "@react-aria/focus": "^3.6.1",
     "@react-aria/i18n": "^3.8.1",
-    "@react-aria/overlays": "3.16.0",
-    "@react-aria/utils": "3.19.0",
-    "@react-aria/visually-hidden": "3.8.3",
-    "@react-stately/calendar": "3.3.1",
-    "@react-stately/datepicker": "3.6.0",
-    "@react-stately/overlays": "3.6.1",
-    "@react-stately/toggle": "3.6.1",
-    "@react-types/dialog": "3.5.4",
-    "@react-types/overlays": "3.8.1",
+    "@react-aria/overlays": "3.17.0",
+    "@react-aria/utils": "3.20.0",
+    "@react-aria/visually-hidden": "3.8.4",
+    "@react-stately/calendar": "3.4.0",
+    "@react-stately/datepicker": "3.7.0",
+    "@react-stately/overlays": "3.6.2",
+    "@react-stately/toggle": "3.6.2",
+    "@react-types/dialog": "3.5.5",
     "@react-types/shared": "3.19.0",
     "@tsed/exceptions": "^6.100.3",
     "dequal": "^2.0.0",
@@ -45,7 +44,8 @@
     "react-i18next": "12.1.5",
     "react-spring": "9.6.1",
     "react-stately": "^3.24.0",
-    "tailwind-variants": "^0.1.8"
+    "tailwind-variants": "^0.1.8",
+    "usehooks-ts": "^2.9.1"
   },
   "type": "module"
 }

package/theme/Accordion/index.d.ts

@@ -27,7 +27,7 @@ export declare const accordionButton: import("tailwind-variants").TVReturnType<{
         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<{
+}, undefined, "grid overflow-hidden w-full items-center border-b-2 border-color-1-500 focus-ring-black", import("tailwind-variants/dist/config").TVConfig<{
     titleBold: {
         true: "font-bold";
     };

package/theme/Button/index.d.ts

@@ -15,7 +15,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
         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<{
+}, 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-ring-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          ";

package/theme/Calendar/index.d.ts

@@ -13,11 +13,11 @@ export declare const calendarNavigationButtonsContainer: import("tailwind-varian
         [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex items-center gap-1">;
     } | undefined;
 } | {}, undefined, "flex items-center gap-1", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center gap-1"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center gap-1"> | {}, undefined>;
-export declare const calendarNavigationButtons: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200"> | {
+export declare const calendarNavigationButtons: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200 focus-ring-black"> | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200">;
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200 focus-ring-black">;
     } | undefined;
-} | {}, undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200"> | {}, undefined>;
+} | {}, undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200 focus-ring-black", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200 focus-ring-black"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "active:bg-color-1-500 p-2 rounded-full active:text-color-1-100 hover:bg-color-1-200 focus-ring-black"> | {}, undefined>;
 export declare const calendarTable: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "flex-1"> | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex-1">;

package/theme/DatePicker/index.d.ts

@@ -3,11 +3,11 @@ export declare const datePickerContainer: import("tailwind-variants").TVReturnTy
         [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "relative inline-flex flex-col text-left">;
     } | undefined;
 } | {}, undefined, "relative inline-flex flex-col text-left", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "relative inline-flex flex-col text-left"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "relative inline-flex flex-col text-left"> | {}, undefined>;
-export declare const datePickerButton: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center border-2 border-color-1-500 rounded"> | {
+export declare const datePickerButton: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center border-2 border-color-1-500 rounded focus-ring-black"> | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex items-center border-2 border-color-1-500 rounded">;
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "flex items-center border-2 border-color-1-500 rounded focus-ring-black">;
     } | undefined;
-} | {}, undefined, "flex items-center border-2 border-color-1-500 rounded", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center border-2 border-color-1-500 rounded"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center border-2 border-color-1-500 rounded"> | {}, undefined>;
+} | {}, undefined, "flex items-center border-2 border-color-1-500 rounded focus-ring-black", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center border-2 border-color-1-500 rounded focus-ring-black"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "flex items-center border-2 border-color-1-500 rounded focus-ring-black"> | {}, undefined>;
 export declare const datePickerCalendarPopoverUnderlay: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "fixed inset-0"> | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "fixed inset-0">;
@@ -39,6 +39,11 @@ export declare const datePickerDateField: import("tailwind-variants").TVReturnTy
         false: "hidden";
     };
 }, undefined>;
+export declare const datePickerDateSegment: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "focus-ring-black"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "focus-ring-black">;
+    } | undefined;
+} | {}, undefined, "focus-ring-black", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "focus-ring-black"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "focus-ring-black"> | {}, undefined>;
 export declare const datePickerIcon: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "text-color-1-500 bg-color-1-100 border-l-2 border-color-1-500 h-full py-2 px-2"> | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "text-color-1-500 bg-color-1-100 border-l-2 border-color-1-500 h-full py-2 px-2">;

package/theme/LightBox/index.d.ts

@@ -1,13 +1,18 @@
+export declare const lightBoxWrapper: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "focus-ring-black"> | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "focus-ring-black">;
+    } | undefined;
+} | {}, undefined, "focus-ring-black", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "focus-ring-black"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "focus-ring-black"> | {}, undefined>;
 export declare const lightBoxContainer: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, " w-screen h-screen relative flex items-center m-auto justify-center"> | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, " w-screen h-screen relative flex items-center m-auto justify-center">;
     } | undefined;
 } | {}, undefined, " w-screen h-screen relative flex items-center m-auto justify-center", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, " w-screen h-screen relative flex items-center m-auto justify-center"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, " w-screen h-screen relative flex items-center m-auto justify-center"> | {}, undefined>;
-export declare const lightBoxCloseBtn: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "absolute xl:top-10 xl:right-20 lg:top-8 lg:right-8 z-10 top-4 right-4 w-[2.5rem]\n    h-[2.5rem]"> | {
+export declare const lightBoxCloseBtn: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "\n    absolute\n    xl:top-10\n    xl:right-20\n    lg:top-8\n    lg:right-8\n    z-10\n    top-4\n    right-4\n    w-[2.5rem]\n    h-[2.5rem]\n    focus-ring-black\n  "> | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "absolute xl:top-10 xl:right-20 lg:top-8 lg:right-8 z-10 top-4 right-4 w-[2.5rem]\n    h-[2.5rem]">;
+        [x: string]: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "\n    absolute\n    xl:top-10\n    xl:right-20\n    lg:top-8\n    lg:right-8\n    z-10\n    top-4\n    right-4\n    w-[2.5rem]\n    h-[2.5rem]\n    focus-ring-black\n  ">;
     } | undefined;
-} | {}, undefined, "absolute xl:top-10 xl:right-20 lg:top-8 lg:right-8 z-10 top-4 right-4 w-[2.5rem]\n    h-[2.5rem]", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "absolute xl:top-10 xl:right-20 lg:top-8 lg:right-8 z-10 top-4 right-4 w-[2.5rem]\n    h-[2.5rem]"> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "absolute xl:top-10 xl:right-20 lg:top-8 lg:right-8 z-10 top-4 right-4 w-[2.5rem]\n    h-[2.5rem]"> | {}, undefined>;
+} | {}, undefined, "\n    absolute\n    xl:top-10\n    xl:right-20\n    lg:top-8\n    lg:right-8\n    z-10\n    top-4\n    right-4\n    w-[2.5rem]\n    h-[2.5rem]\n    focus-ring-black\n  ", import("tailwind-variants/dist/config").TVConfig<unknown, import("tailwind-variants").TVVariantsDefault<undefined, "\n    absolute\n    xl:top-10\n    xl:right-20\n    lg:top-8\n    lg:right-8\n    z-10\n    top-4\n    right-4\n    w-[2.5rem]\n    h-[2.5rem]\n    focus-ring-black\n  "> | {}>, import("tailwind-variants").TVVariantsDefault<undefined, "\n    absolute\n    xl:top-10\n    xl:right-20\n    lg:top-8\n    lg:right-8\n    z-10\n    top-4\n    right-4\n    w-[2.5rem]\n    h-[2.5rem]\n    focus-ring-black\n  "> | {}, undefined>;
 export declare const lightBoxLabel: import("tailwind-variants").TVReturnType<import("tailwind-variants").TVVariantsDefault<undefined, "sr-only"> | {
     size?: {
         h1?: import("tailwind-variants").ClassValue | import("tailwind-variants").SlotsClassValue<undefined, "sr-only">;

package/theme/ShareButton/index.d.ts

@@ -3,7 +3,7 @@ export declare const shareButtonContainer: import("tailwind-variants").TVReturnT
         row: "flex-row";
         column: "flex-col";
     };
-}, undefined, "flex print:hidden", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "flex print:hidden relative", import("tailwind-variants/dist/config").TVConfig<{
     listDirection: {
         row: "flex-row";
         column: "flex-col";
@@ -24,7 +24,7 @@ export declare const shareButton: import("tailwind-variants").TVReturnType<{
         true: "";
         false: "";
     };
-}, undefined, "relative z-20 !bg-color-1-500 hover:!bg-color-1-400 p-4 active:!bg-color-1-400 rounded-full text-white", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "relative z-20 !bg-color-1-500 hover:!bg-color-1-400 w-16 h-16 flex justify-center items-center active:!bg-color-1-400 rounded-full text-white focus-ring-black", import("tailwind-variants/dist/config").TVConfig<{
     isOpen: {
         true: "";
         false: "";
@@ -42,17 +42,17 @@ export declare const shareButton: import("tailwind-variants").TVReturnType<{
 }, undefined>;
 export declare const shareButtonLinksList: import("tailwind-variants").TVReturnType<{
     listDirection: {
-        row: "flex-row pl-14 [margin-left:-3.25rem]";
-        column: "flex-col [margin-top:-3.25rem] [width:calc(100% + .5rem)] pt-14";
+        row: "flex-row pl-14 h-16 left-0";
+        column: "flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0";
     };
     isOpen: {
         true: "opacity-100 visible";
         false: "";
     };
-}, undefined, "!bg-color-1-200 relative opacity-0 invisible transition duration-300 flex items-center p-0 bg-primary-1 pb-0 z-0 rounded-b-full rounded-t-full", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "!bg-color-1-200 absolute opacity-0 invisible flex transition duration-300 items-center p-0 bg-primary-1 z-0 rounded-b-full rounded-t-full", import("tailwind-variants/dist/config").TVConfig<{
     listDirection: {
-        row: "flex-row pl-14 [margin-left:-3.25rem]";
-        column: "flex-col [margin-top:-3.25rem] [width:calc(100% + .5rem)] pt-14";
+        row: "flex-row pl-14 h-16 left-0";
+        column: "flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0";
     };
     isOpen: {
         true: "opacity-100 visible";
@@ -60,8 +60,8 @@ export declare const shareButtonLinksList: import("tailwind-variants").TVReturnT
     };
 }, {
     listDirection: {
-        row: "flex-row pl-14 [margin-left:-3.25rem]";
-        column: "flex-col [margin-top:-3.25rem] [width:calc(100% + .5rem)] pt-14";
+        row: "flex-row pl-14 h-16 left-0";
+        column: "flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0";
     };
     isOpen: {
         true: "opacity-100 visible";
@@ -69,8 +69,8 @@ export declare const shareButtonLinksList: import("tailwind-variants").TVReturnT
     };
 }>, {
     listDirection: {
-        row: "flex-row pl-14 [margin-left:-3.25rem]";
-        column: "flex-col [margin-top:-3.25rem] [width:calc(100% + .5rem)] pt-14";
+        row: "flex-row pl-14 h-16 left-0";
+        column: "flex-col [width:calc(100% + .5rem)] pt-14 w-16 top-0";
     };
     isOpen: {
         true: "opacity-100 visible";
@@ -82,7 +82,7 @@ export declare const shareButtonLink: import("tailwind-variants").TVReturnType<{
         row: "last:rounded-r-full h-full";
         column: "last:rounded-b-full";
     };
-}, undefined, "flex items-center justify-center cursor-pointer bg-color-1-200 hover:bg-color-1-300 w-full text-color-1-500 rounded-none p-2", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "\n    flex\n    items-center\n    justify-center\n    cursor-pointer\n    bg-color-1-200\n    hover:bg-color-1-300\n    w-full\n    text-color-1-500\n    rounded-none\n    p-2\n    focus-ring-black\n    z-10\n    has-focus-ring:z-20\n  ", import("tailwind-variants/dist/config").TVConfig<{
     listDirection: {
         row: "last:rounded-r-full h-full";
         column: "last:rounded-b-full";

package/theme/TextArea/index.d.ts

@@ -2,7 +2,7 @@ export declare const textArea: import("tailwind-variants").TVReturnType<{
     isError: {
         true: "border-red-500";
     };
-}, undefined, "w-full min-h-32 rounded-2xl px-6 h-12 border-2 border-solid transition duration-300 ease-in-out text-gray-2 placeholder:text-gray-2 focus-visible:text-black focus-visible:placeholder:text-black focus-visible:border-black", import("tailwind-variants/dist/config").TVConfig<{
+}, undefined, "\n    w-full\n    min-h-32\n    rounded-2xl\n    px-6\n    h-12\n    border-2\n    border-solid\n    transition\n    duration-300\n    ease-in-out\n    text-gray-2\n    placeholder:text-gray-2\n    focus-ring-black\n    \n  ", import("tailwind-variants/dist/config").TVConfig<{
     isError: {
         true: "border-red-500";
     };