@kopexa/theme 1.4.2 → 1.4.3

package/dist/index.js

@@ -21,11 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   button: () => button,
+  calendar: () => calendar,
   command: () => command,
   dialog: () => dialog,
   drawer: () => drawer,
   dropdownMenu: () => dropdownMenu,
+  input: () => input,
   pageLayout: () => pageLayout,
+  passwordInput: () => passwordInput,
   popover: () => popover,
   spinner: () => spinner,
   tooltip: () => tooltip
@@ -40,6 +43,9 @@ var focusVisibleClasses = [
   "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
   //"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 ];
+var focusWithinClasses = [
+  "focus-within:outline-2 focus-within:outline-ring focus-within:outline-offset-2"
+];
 
 // src/utils/variants.ts
 var solid = {
@@ -89,15 +95,6 @@ var button = (0, import_tailwind_variants.tv)({
       ghost: "",
       outline: "border-2 bg-transparent",
       link: ""
-      // destructive:
-      // 	"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-      // outline:
-      // 	"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-      // secondary:
-      // 	"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-      // ghost:
-      // 	"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-      // link: "text-primary underline-offset-4 hover:underline",
     },
     size: {
       sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5",
@@ -225,9 +222,62 @@ var button = (0, import_tailwind_variants.tv)({
   ]
 });
 
-// src/components/command.ts
+// src/components/calendar.ts
 var import_tailwind_variants2 = require("tailwind-variants");
-var command = (0, import_tailwind_variants2.tv)({
+var calendar = (0, import_tailwind_variants2.tv)({
+  slots: {
+    base: [
+      "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+      String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+      String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`
+    ],
+    icon: "size-4",
+    root: "w-fit",
+    months: "flex gap-4 flex-col md:flex-row relative",
+    month: "flex flex-col w-full gap-4",
+    nav: "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+    buttonPrevious: "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+    buttonNext: "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+    monthCaption: "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+    dropdown: "absolute bg-popover inset-0 opacity-0",
+    dropdowns: "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+    dropdownRoot: "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+    captionLabel: "select-none font-medium",
+    table: "w-full border-collapse",
+    weekdays: "flex",
+    weekday: "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+    week: "flex w-full mt-2",
+    weekNumberWrapper: "flex size-(--cell-size) items-center justify-center text-center",
+    weekNumberHeader: "select-none w-(--cell-size)",
+    weekNumber: "text-[0.8rem] select-none text-muted-foreground",
+    day: "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+    dayButton: "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+    rangeStart: "rounded-l-md bg-accent",
+    rangeMiddle: "rounded-none",
+    rangeEnd: "rounded-r-md bg-accent",
+    today: "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+    outside: "text-muted-foreground aria-selected:text-muted-foreground",
+    disabled: "text-muted-foreground opacity-50",
+    hidden: "invisible"
+  },
+  variants: {
+    captionLayout: {
+      label: {
+        captionLabel: "text-sm"
+      },
+      default: {
+        captionLabel: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5"
+      }
+    }
+  },
+  defaultVariants: {
+    captionLayout: "default"
+  }
+});
+
+// src/components/command.ts
+var import_tailwind_variants3 = require("tailwind-variants");
+var command = (0, import_tailwind_variants3.tv)({
   slots: {
     root: "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
     inputWrapper: "flex h-9 items-center gap-2 border-b px-3",
@@ -246,8 +296,8 @@ var command = (0, import_tailwind_variants2.tv)({
 });
 
 // src/components/dialog.ts
-var import_tailwind_variants3 = require("tailwind-variants");
-var dialog = (0, import_tailwind_variants3.tv)({
+var import_tailwind_variants4 = require("tailwind-variants");
+var dialog = (0, import_tailwind_variants4.tv)({
   slots: {
     overlay: ["fixed inset-0 z-50 bg-black/25"],
     content: [
@@ -338,8 +388,8 @@ var dialog = (0, import_tailwind_variants3.tv)({
 });
 
 // src/components/drawer.ts
-var import_tailwind_variants4 = require("tailwind-variants");
-var drawer = (0, import_tailwind_variants4.tv)({
+var import_tailwind_variants5 = require("tailwind-variants");
+var drawer = (0, import_tailwind_variants5.tv)({
   slots: {
     overlay: dialog.slots.overlay,
     content: [
@@ -419,8 +469,8 @@ var drawer = (0, import_tailwind_variants4.tv)({
 });
 
 // src/components/dropdown-menu.ts
-var import_tailwind_variants5 = require("tailwind-variants");
-var dropdownMenu = (0, import_tailwind_variants5.tv)({
+var import_tailwind_variants6 = require("tailwind-variants");
+var dropdownMenu = (0, import_tailwind_variants6.tv)({
   slots: {
     root: "",
     content: "min-w-56 bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
@@ -439,9 +489,97 @@ var dropdownMenu = (0, import_tailwind_variants5.tv)({
   }
 });
 
+// src/components/input.ts
+var import_tailwind_variants7 = require("tailwind-variants");
+var passwordInput = (0, import_tailwind_variants7.tv)({
+  slots: {
+    button: "focus:outline-hidden",
+    icon: "pointer-events-none text-muted-foreground"
+  }
+});
+var input = (0, import_tailwind_variants7.tv)({
+  base: [],
+  slots: {
+    inputWrapper: [
+      "relative w-full inline-flex flex-row items-center shadow-xs px-3 gap-3 [&_svg]:shrink-0",
+      "border-input border dark:bg-input/30 data-[hidden=true]:hidden transition-[color,box-shadow]",
+      "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      ...focusWithinClasses
+    ],
+    innerWrapper: "inline-flex w-full items-center h-full box-border",
+    input: [
+      "w-full font-normal outline-hidden focus-visible:outline-hidden",
+      "data-[has-start-content=true]:ps-1.5",
+      "data-[has-end-content=true]:pe-1.5",
+      "file:cursor-pointer file:bg-transparent file:border-0",
+      "autofill:bg-transparent bg-clip-text",
+      // legacy
+      "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+      "flex",
+      // file
+      "file:text-foreground file:inline-flex file:text-sm file:font-medium",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+    ],
+    clearButton: [
+      "p-2 -m-2 z-10 absolute end-3 start-auto pointer-events-none",
+      "appearance-none outline-hidden select-none opacity-0 cursor-pointer",
+      "active:!opacity-70 rounded-full"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        inputWrapper: ["h-8 min-h-8 px-2 rounded-sm [&_svg]:size-4"],
+        input: "text-sm file:h-6"
+      },
+      md: {
+        inputWrapper: "h-10 min-10 rounded-md [&_svg]:size-4",
+        input: "text-base md:text-sm file:h-8",
+        clearButton: "hover:opacity-100"
+      },
+      lg: {
+        inputWrapper: "h-12 min-h-12 rounded-lg [&_svg]:size-4",
+        input: "text-base file:h-10",
+        clearButton: "hover:opacity-100"
+      }
+    },
+    radius: {
+      none: {
+        inputWrapper: "rounded-none"
+      },
+      sm: {
+        inputWrapper: "rounded-sm"
+      },
+      md: {
+        inputWrapper: "rounded-md"
+      },
+      lg: {
+        inputWrapper: "rounded-lg"
+      },
+      full: {
+        inputWrapper: "rounded-full"
+      }
+    },
+    isClearable: {
+      true: {
+        input: "peer pe-6",
+        clearButton: [
+          "peer-data-[filled=true]:pointer-events-auto",
+          "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+          "peer-data-[filled=true]:scale-100"
+        ]
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
 // src/components/page-layout.ts
-var import_tailwind_variants6 = require("tailwind-variants");
-var pageLayout = (0, import_tailwind_variants6.tv)({
+var import_tailwind_variants8 = require("tailwind-variants");
+var pageLayout = (0, import_tailwind_variants8.tv)({
   slots: {
     root: "",
     wrapper: "flex mx-auto flex-wrap",
@@ -538,8 +676,8 @@ var pageLayout = (0, import_tailwind_variants6.tv)({
 });
 
 // src/components/popover.ts
-var import_tailwind_variants7 = require("tailwind-variants");
-var popover = (0, import_tailwind_variants7.tv)({
+var import_tailwind_variants9 = require("tailwind-variants");
+var popover = (0, import_tailwind_variants9.tv)({
   slots: {
     content: [
       "bg-popover text-popover-foreground z-50 w-72",
@@ -550,8 +688,8 @@ var popover = (0, import_tailwind_variants7.tv)({
 });
 
 // src/components/spinner.ts
-var import_tailwind_variants8 = require("tailwind-variants");
-var spinner = (0, import_tailwind_variants8.tv)({
+var import_tailwind_variants10 = require("tailwind-variants");
+var spinner = (0, import_tailwind_variants10.tv)({
   slots: {
     base: "relative inline-flex flex-col gap-2 items-center justify-center",
     wrapper: "relative flex",
@@ -562,6 +700,13 @@ var spinner = (0, import_tailwind_variants8.tv)({
   },
   variants: {
     size: {
+      xs: {
+        wrapper: "w-4 h-4",
+        circle1: "border-2",
+        circle2: "border-2",
+        dots: "size-1",
+        label: "text-xs"
+      },
       sm: {
         wrapper: "w-5 h-5",
         circle1: "border-2",
@@ -661,8 +806,8 @@ var spinner = (0, import_tailwind_variants8.tv)({
 });
 
 // src/components/tooltip.ts
-var import_tailwind_variants9 = require("tailwind-variants");
-var tooltip = (0, import_tailwind_variants9.tv)({
+var import_tailwind_variants11 = require("tailwind-variants");
+var tooltip = (0, import_tailwind_variants11.tv)({
   slots: {
     content: [
       "bg-primary text-primary-foreground",
@@ -675,11 +820,14 @@ var tooltip = (0, import_tailwind_variants9.tv)({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   button,
+  calendar,
   command,
   dialog,
   drawer,
   dropdownMenu,
+  input,
   pageLayout,
+  passwordInput,
   popover,
   spinner,
   tooltip

package/dist/index.mjs

@@ -1,18 +1,29 @@
-import "./chunk-KIDK6JOG.mjs";
+import "./chunk-XSN6P5JL.mjs";
+import "./chunk-HNTFXPSN.mjs";
+import {
+  input,
+  passwordInput
+} from "./chunk-PQSL3W26.mjs";
+import {
+  pageLayout
+} from "./chunk-GQV7INYX.mjs";
 import {
   popover
 } from "./chunk-J35D7RWA.mjs";
 import {
   spinner
-} from "./chunk-IL3JFLE2.mjs";
+} from "./chunk-4UDOCFU5.mjs";
 import {
   tooltip
 } from "./chunk-SVCFD7RR.mjs";
 import {
   button
-} from "./chunk-5FI7W32M.mjs";
-import "./chunk-HQ27V5V4.mjs";
+} from "./chunk-25CHZW25.mjs";
 import "./chunk-U6ONJKJY.mjs";
+import "./chunk-2C5EQ4P3.mjs";
+import {
+  calendar
+} from "./chunk-JWF5ABNP.mjs";
 import {
   command
 } from "./chunk-YPHFKGNI.mjs";
@@ -25,16 +36,16 @@ import {
 import {
   dropdownMenu
 } from "./chunk-EXBKQDH5.mjs";
-import {
-  pageLayout
-} from "./chunk-GQV7INYX.mjs";
 export {
   button,
+  calendar,
   command,
   dialog,
   drawer,
   dropdownMenu,
+  input,
   pageLayout,
+  passwordInput,
   popover,
   spinner,
   tooltip

package/dist/utils/classes.d.mts

@@ -2,6 +2,7 @@
  * focus classNames when the element is focused by keyboard.
  */
 declare const focusVisibleClasses: string[];
+declare const focusWithinClasses: string[];
 declare const dataFocusVisibleClasses: string[];
 
-export { dataFocusVisibleClasses, focusVisibleClasses };
+export { dataFocusVisibleClasses, focusVisibleClasses, focusWithinClasses };

package/dist/utils/classes.d.ts

@@ -2,6 +2,7 @@
  * focus classNames when the element is focused by keyboard.
  */
 declare const focusVisibleClasses: string[];
+declare const focusWithinClasses: string[];
 declare const dataFocusVisibleClasses: string[];
 
-export { dataFocusVisibleClasses, focusVisibleClasses };
+export { dataFocusVisibleClasses, focusVisibleClasses, focusWithinClasses };

package/dist/utils/classes.js

@@ -21,16 +21,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var classes_exports = {};
 __export(classes_exports, {
   dataFocusVisibleClasses: () => dataFocusVisibleClasses,
-  focusVisibleClasses: () => focusVisibleClasses
+  focusVisibleClasses: () => focusVisibleClasses,
+  focusWithinClasses: () => focusWithinClasses
 });
 module.exports = __toCommonJS(classes_exports);
 var focusVisibleClasses = [
   "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
   //"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 ];
+var focusWithinClasses = [
+  "focus-within:outline-2 focus-within:outline-ring focus-within:outline-offset-2"
+];
 var dataFocusVisibleClasses = ["outline-hidden"];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   dataFocusVisibleClasses,
-  focusVisibleClasses
+  focusVisibleClasses,
+  focusWithinClasses
 });

package/dist/utils/classes.mjs

@@ -1,8 +1,10 @@
 import {
   dataFocusVisibleClasses,
-  focusVisibleClasses
-} from "../chunk-HQ27V5V4.mjs";
+  focusVisibleClasses,
+  focusWithinClasses
+} from "../chunk-2C5EQ4P3.mjs";
 export {
   dataFocusVisibleClasses,
-  focusVisibleClasses
+  focusVisibleClasses,
+  focusWithinClasses
 };

package/dist/utils/index.d.mts

@@ -0,0 +1,2 @@
+export { SlotsToClasses } from './types.mjs';
+import 'tailwind-variants';

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { SlotsToClasses } from './types.js';
+import 'tailwind-variants';

package/dist/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.ts
+var utils_exports = {};
+module.exports = __toCommonJS(utils_exports);

package/dist/utils/index.mjs

@@ -0,0 +1 @@
+import "../chunk-XSN6P5JL.mjs";

package/dist/utils/types.d.mts

@@ -0,0 +1,10 @@
+import { ClassValue } from 'tailwind-variants';
+
+/**
+ * This Typescript utility transform a list of slots into a list of {slot: classes}
+ */
+type SlotsToClasses<S extends string> = {
+    [key in S]?: Exclude<ClassValue, 0n>;
+};
+
+export type { SlotsToClasses };

package/dist/utils/types.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue } from 'tailwind-variants';
+
+/**
+ * This Typescript utility transform a list of slots into a list of {slot: classes}
+ */
+type SlotsToClasses<S extends string> = {
+    [key in S]?: Exclude<ClassValue, 0n>;
+};
+
+export type { SlotsToClasses };

package/dist/utils/types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/theme",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "The default theme for Kopexa components",
   "keywords": [
     "theme",
@@ -45,7 +45,7 @@
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "1.0.0",
     "tw-animate-css": "^1.3.5",
-    "@kopexa/shared-utils": "1.1.1"
+    "@kopexa/shared-utils": "1.1.2"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"