@snapcall/design-system 1.21.2 → 1.22.0-beta.1

package/dist/components/Banner/index.js

@@ -0,0 +1,152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Banner/index.ts
+var Banner_exports = {};
+__export(Banner_exports, {
+  Banner: () => Banner
+});
+module.exports = __toCommonJS(Banner_exports);
+
+// src/components/Banner/Banner.tsx
+var React = __toESM(require("react"));
+var import_cva = require("cva");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Banner/Banner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var bannerVariants = (0, import_cva.cva)({
+  variants: {
+    color: {
+      gray: "bg-gray-50 ring-gray-200 text-gray-200",
+      blue: "bg-blue-100 ring-blue-700 text-blue-700",
+      green: "bg-green-100 ring-green-700 text-green-700",
+      amber: "bg-amber-100 ring-amber-700 text-amber-700",
+      red: "bg-red-100 ring-red-700 text-red-700",
+      unset: ""
+    }
+  },
+  defaultVariants: {
+    color: "gray"
+  }
+});
+function Banner(_a) {
+  var _b = _a, {
+    title,
+    text,
+    icon,
+    action,
+    color,
+    className
+  } = _b, props = __objRest(_b, [
+    "title",
+    "text",
+    "icon",
+    "action",
+    "color",
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "flex gap-2 items-center w-fit max-w-full ring-1 ring-inset rounded-lg min-w-0",
+        bannerVariants({ color }),
+        {
+          "pl-2 py-1 pr-1": !title && Boolean(action),
+          "p-2": !title && !action,
+          "p-4": title
+        },
+        className
+      )
+    }, props), {
+      children: title ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+          icon && React.cloneElement(icon, {
+            size: 16,
+            className: cn("shrink-0", icon.props.className)
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-black font-semibold truncate", children: title })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("flex flex-col gap-2", { "pl-6": Boolean(icon) }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-black", children: text }),
+          action && React.cloneElement(action, {
+            className: cn("self-start", action.props.className)
+          })
+        ] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        icon && React.cloneElement(icon, {
+          size: 16,
+          className: cn("shrink-0", icon.props.className)
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-black", children: text }),
+        action && React.cloneElement(action)
+      ] })
+    })
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner
+});

package/dist/components/Banner/index.mjs

@@ -0,0 +1,84 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "../../chunk-BOWIL6WZ.mjs";
+
+// src/components/Banner/Banner.tsx
+import * as React from "react";
+import { cva } from "cva";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var bannerVariants = cva({
+  variants: {
+    color: {
+      gray: "bg-gray-50 ring-gray-200 text-gray-200",
+      blue: "bg-blue-100 ring-blue-700 text-blue-700",
+      green: "bg-green-100 ring-green-700 text-green-700",
+      amber: "bg-amber-100 ring-amber-700 text-amber-700",
+      red: "bg-red-100 ring-red-700 text-red-700",
+      unset: ""
+    }
+  },
+  defaultVariants: {
+    color: "gray"
+  }
+});
+function Banner(_a) {
+  var _b = _a, {
+    title,
+    text,
+    icon,
+    action,
+    color,
+    className
+  } = _b, props = __objRest(_b, [
+    "title",
+    "text",
+    "icon",
+    "action",
+    "color",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "flex gap-2 items-center w-fit max-w-full ring-1 ring-inset rounded-lg min-w-0",
+        bannerVariants({ color }),
+        {
+          "pl-2 py-1 pr-1": !title && Boolean(action),
+          "p-2": !title && !action,
+          "p-4": title
+        },
+        className
+      )
+    }, props), {
+      children: title ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+          icon && React.cloneElement(icon, {
+            size: 16,
+            className: cn("shrink-0", icon.props.className)
+          }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-black font-semibold truncate", children: title })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", { "pl-6": Boolean(icon) }), children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-black", children: text }),
+          action && React.cloneElement(action, {
+            className: cn("self-start", action.props.className)
+          })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && React.cloneElement(icon, {
+          size: 16,
+          className: cn("shrink-0", icon.props.className)
+        }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-black", children: text }),
+        action && React.cloneElement(action)
+      ] })
+    })
+  );
+}
+export {
+  Banner
+};

package/dist/components/Button/index.d.mts

@@ -4,7 +4,7 @@ import { VariantProps } from 'cva';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "outline" | "outlineBlue" | "destructive" | "ghostBlue" | "ghostRed" | "ghostGray" | "roundedFill" | "roundedGlass" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -29,10 +29,10 @@ declare const buttonVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -61,7 +61,7 @@ declare const buttonVariants: (props?: ({
 declare const buttonSizes: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -86,10 +86,10 @@ declare const buttonSizes: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -118,7 +118,7 @@ declare const buttonSizes: (props?: ({
 declare const iconButtonSizes: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -143,10 +143,10 @@ declare const iconButtonSizes: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;

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

@@ -4,7 +4,7 @@ import { VariantProps } from 'cva';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | "outline" | "outlineBlue" | "destructive" | "ghostBlue" | "ghostRed" | "ghostGray" | "roundedFill" | "roundedGlass" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -29,10 +29,10 @@ declare const buttonVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -61,7 +61,7 @@ declare const buttonVariants: (props?: ({
 declare const buttonSizes: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -86,10 +86,10 @@ declare const buttonSizes: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -118,7 +118,7 @@ declare const buttonSizes: (props?: ({
 declare const iconButtonSizes: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | undefined;
 } & ({
-    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;
@@ -143,10 +143,10 @@ declare const iconButtonSizes: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
-    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
         [x: string]: any;
     } | null | undefined)[] | {
         [x: string]: any;

package/dist/components/Button/index.js

@@ -120,15 +120,15 @@ function cn(...inputs) {
 // src/components/Button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",

package/dist/components/Button/index.mjs

@@ -3,7 +3,7 @@ import {
   buttonSizes,
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import "../../chunk-BOWIL6WZ.mjs";
 export {

package/dist/components/Calendar/index.js

@@ -184,15 +184,15 @@ var SpinnerIcon = (0, import_react3.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",
@@ -331,9 +331,9 @@ function Calendar(_a) {
         ),
         day_button: "h-8 w-8 p-0 cursor-pointer rounded-md text-black",
         range_start: "day-range-start",
-        range_middle: "day-range-middle *:aria-selected:bg-blue-100 *:aria-selected:text-blue-700",
+        range_middle: "day-range-middle aria-selected:*:bg-blue-100 aria-selected:*:text-blue-700",
         range_end: "day-range-end",
-        selected: "day-selected *:bg-blue-700 *:text-white dark:*:text-black *:hover:bg-blue-700 *:hover:text-white dark:*:hover:text-black *:focus:bg-blue-700 *:focus:text-white dark:*:focus:text-black *:opacity-100",
+        selected: "day-selected *:bg-blue-700 *:text-white dark:*:text-black hover:*:bg-blue-700 hover:*:text-white dark:hover:*:text-black focus:*:bg-blue-700 focus:*:text-white dark:focus:*:text-black *:opacity-100",
         outside: "text-gray-700 opacity-50",
         disabled: "text-gray-700 opacity-50",
         hidden: "invisible"

package/dist/components/Calendar/index.mjs

@@ -7,7 +7,7 @@ import {
 import {
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
@@ -60,9 +60,9 @@ function Calendar(_a) {
         ),
         day_button: "h-8 w-8 p-0 cursor-pointer rounded-md text-black",
         range_start: "day-range-start",
-        range_middle: "day-range-middle *:aria-selected:bg-blue-100 *:aria-selected:text-blue-700",
+        range_middle: "day-range-middle aria-selected:*:bg-blue-100 aria-selected:*:text-blue-700",
         range_end: "day-range-end",
-        selected: "day-selected *:bg-blue-700 *:text-white dark:*:text-black *:hover:bg-blue-700 *:hover:text-white dark:*:hover:text-black *:focus:bg-blue-700 *:focus:text-white dark:*:focus:text-black *:opacity-100",
+        selected: "day-selected *:bg-blue-700 *:text-white dark:*:text-black hover:*:bg-blue-700 hover:*:text-white dark:hover:*:text-black focus:*:bg-blue-700 focus:*:text-white dark:focus:*:text-black *:opacity-100",
         outside: "text-gray-700 opacity-50",
         disabled: "text-gray-700 opacity-50",
         hidden: "invisible"

package/dist/components/Carousel/index.js

@@ -253,15 +253,15 @@ var SpinnerIcon = (0, import_react5.forwardRef)(
 // src/components/Button/Button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",

package/dist/components/Carousel/index.mjs

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../../chunk-XI3KELZM.mjs";
+} from "../../chunk-R6W6SKNR.mjs";
 import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,

package/dist/components/Checkbox/index.js

@@ -114,7 +114,7 @@ var Checkbox = React.forwardRef((_a, ref) => {
     CheckboxPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "flex h-4 w-4 appearance-none items-center justify-center rounded bg-gray-50 border-gray-200 border outline-none data-[state=checked]:bg-blue-700 data-[state=checked]:border-blue-700 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed",
+        "flex h-4 w-4 appearance-none items-center justify-center rounded-sm bg-gray-50 border-gray-200 border outline-hidden data-[state=checked]:bg-blue-700 data-[state=checked]:border-blue-700 data-disabled:opacity-40 data-disabled:cursor-not-allowed",
         className
       )
     }, props), {

package/dist/components/Checkbox/index.mjs

@@ -1,6 +1,6 @@
 import {
   Checkbox
-} from "../../chunk-ZMQWNJ3B.mjs";
+} from "../../chunk-TU6HU32A.mjs";
 import "../../chunk-AFJWE6PJ.mjs";
 import "../../chunk-BOWIL6WZ.mjs";
 export {

package/dist/components/Command/index.d.mts

@@ -1,2 +1,2 @@
-export { a as Command, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandLoading, h as CommandSeparator } from '../index-Btj0VOSP.mjs';
+export { a as Command, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandLoading, h as CommandSeparator } from '../index-CMWfBd0H.mjs';
 import 'react';

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

@@ -1,2 +1,2 @@
-export { a as Command, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandLoading, h as CommandSeparator } from '../index-Btj0VOSP.js';
+export { a as Command, b as CommandEmpty, c as CommandGroup, d as CommandInput, e as CommandItem, f as CommandList, g as CommandLoading, h as CommandSeparator } from '../index-CMWfBd0H.js';
 import 'react';

package/dist/components/Command/index.js

@@ -201,15 +201,15 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_cva = require("cva");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var buttonVariants = (0, import_cva.cva)({
-  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
     variant: {
-      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
       secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
       tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
       outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
-      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black [&>svg]:dark:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
       ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
       ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
       ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",
@@ -348,7 +348,7 @@ var Checkbox = React2.forwardRef((_a, ref) => {
     CheckboxPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
-        "flex h-4 w-4 appearance-none items-center justify-center rounded bg-gray-50 border-gray-200 border outline-none data-[state=checked]:bg-blue-700 data-[state=checked]:border-blue-700 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed",
+        "flex h-4 w-4 appearance-none items-center justify-center rounded-sm bg-gray-50 border-gray-200 border outline-hidden data-[state=checked]:bg-blue-700 data-[state=checked]:border-blue-700 data-disabled:opacity-40 data-disabled:cursor-not-allowed",
         className
       )
     }, props), {
@@ -380,7 +380,7 @@ var CommandInput = React3.forwardRef((_a, ref) => {
   const [val, setVal] = (0, import_react5.useState)(value);
   const clearInput = () => {
     setVal("");
-    onValueChange && onValueChange("");
+    onValueChange == null ? void 0 : onValueChange("");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
@@ -395,12 +395,12 @@ var CommandInput = React3.forwardRef((_a, ref) => {
             ref,
             value: val,
             className: cn(
-              "flex w-full py-2 rounded-md bg-transparent text-sm font-normal text-black outline-none placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
+              "flex w-full py-2 rounded-md bg-transparent text-sm font-normal text-black outline-hidden placeholder:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             onValueChange: (val2) => {
               setVal(val2);
-              onValueChange && onValueChange(val2);
+              onValueChange == null ? void 0 : onValueChange(val2);
             }
           }, props)
         ),
@@ -499,7 +499,7 @@ var CommandItem = React3.forwardRef(
             checkbox && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Checkbox, { checked }),
             icon && React3.cloneElement(icon, {
               size: 16,
-              className: cn("flex-shrink-0", icon.props.className)
+              className: cn("shrink-0", icon.props.className)
             }),
             children
           ] }),

package/dist/components/Command/index.mjs

@@ -7,12 +7,12 @@ import {
   CommandList,
   CommandLoading,
   CommandSeparator
-} from "../../chunk-RN2FGOFK.mjs";
+} from "../../chunk-CBQRH67Z.mjs";
 import "../../chunk-FMJFBQTF.mjs";
-import "../../chunk-XI3KELZM.mjs";
-import "../../chunk-N65I4EXR.mjs";
-import "../../chunk-ZMQWNJ3B.mjs";
+import "../../chunk-TU6HU32A.mjs";
 import "../../chunk-AFJWE6PJ.mjs";
+import "../../chunk-R6W6SKNR.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import "../../chunk-BOWIL6WZ.mjs";
 export {
   Command,

package/dist/components/CreatableSelect/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
-import { C as CommandItemExtension } from '../index-Btj0VOSP.mjs';
+import { C as CommandItemExtension } from '../index-CMWfBd0H.mjs';
 
 type StringKeys<T> = {
     [K in keyof T]: T[K] extends string ? K : never;

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
-import { C as CommandItemExtension } from '../index-Btj0VOSP.js';
+import { C as CommandItemExtension } from '../index-CMWfBd0H.js';
 
 type StringKeys<T> = {
     [K in keyof T]: T[K] extends string ? K : never;