@sikka/hawa 0.8.11-next → 0.8.13-next

package/dist/index.css

@@ -431,8 +431,18 @@ video {
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
+   
+  
+    --success: 106 70% 40%;  /* A shade of green */
+    --success-foreground: 0 0% 100%;  /* White */
+    --info: 200 100% 30%;  /* A shade of blue */
+    --info-foreground: 0 0% 100%;  /* White */
+    --warning: 45 100% 50%;  /* A shade of yellow */
+    --warning-foreground: 0 0% 20%;  /* Dark grey */
+   
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
+   
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
@@ -1765,6 +1775,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
 }
+.hawa-bg-destructive\/90 {
+  background-color: hsl(var(--destructive) / 0.9);
+}
 .hawa-bg-error {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--error) / var(--tw-bg-opacity));
@@ -1808,6 +1821,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: hsl(var(--info) / var(--tw-bg-opacity));
 }
+.hawa-bg-info\/90 {
+  background-color: hsl(var(--info) / 0.9);
+}
 .hawa-bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1867,6 +1883,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: hsl(var(--success) / var(--tw-bg-opacity));
 }
+.hawa-bg-success\/90 {
+  background-color: hsl(var(--success) / 0.9);
+}
 .hawa-bg-transparent {
   background-color: transparent;
 }
@@ -1874,6 +1893,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: hsl(var(--warning) / var(--tw-bg-opacity));
 }
+.hawa-bg-warning\/90 {
+  background-color: hsl(var(--warning) / 0.9);
+}
 .hawa-bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3230,6 +3252,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
+:is([data-mode="dark"] .dark\:hawa-bg-gray-900) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
 :is([data-mode="dark"] .dark\:hawa-bg-green-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));

package/dist/index.d.mts

@@ -199,6 +199,7 @@ declare function Toaster(props: ToasterProps): React__default.JSX.Element;
 interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
     size?: "default" | "sm" | "lg";
     label?: string;
+    roundedness?: "none" | "full" | "inherit";
 }
 declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -246,7 +247,7 @@ declare const Chip: FC<TChipTypes>;
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
 type AlertTypes = {
-    severity?: "info" | "warning" | "error" | "success";
+    severity?: "info" | "warning" | "error" | "success" | "none";
     /** The title of the alert placed above the text of the alert. Can be used alone */
     title?: any;
     /** The text of the alert placed below the title of the alert. Can be used alone */

package/dist/index.d.ts

@@ -199,6 +199,7 @@ declare function Toaster(props: ToasterProps): React__default.JSX.Element;
 interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
     size?: "default" | "sm" | "lg";
     label?: string;
+    roundedness?: "none" | "full" | "inherit";
 }
 declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -246,7 +247,7 @@ declare const Chip: FC<TChipTypes>;
 declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
 
 type AlertTypes = {
-    severity?: "info" | "warning" | "error" | "success";
+    severity?: "info" | "warning" | "error" | "success" | "none";
     /** The title of the alert placed above the text of the alert. Can be used alone */
     title?: any;
     /** The text of the alert placed below the title of the alert. Can be used alone */

package/dist/index.js

@@ -1717,9 +1717,10 @@ var thumbSize = {
     lg: "hawa-h-[26px] hawa-w-[26px]"
 };
 var Switch = React15.forwardRef(function(_param, ref) {
-    var className = _param.className, _param_size = _param.size, size = _param_size === void 0 ? "default" : _param_size, label = _param.label, props = _object_without_properties(_param, [
+    var className = _param.className, _param_size = _param.size, size = _param_size === void 0 ? "default" : _param_size, _param_roundedness = _param.roundedness, roundedness = _param_roundedness === void 0 ? "inherit" : _param_roundedness, label = _param.label, props = _object_without_properties(_param, [
         "className",
         "size",
+        "roundedness",
         "label"
     ]);
     var _React15_useState = _sliced_to_array(React15.useState(null), 2), parentDirection = _React15_useState[0], setParentDirection = _React15_useState[1];
@@ -1732,15 +1733,25 @@ var Switch = React15.forwardRef(function(_param, ref) {
             setParentDirection(dir);
         }
     });
+    var rootRoundednessStyles = {
+        none: "hawa-rounded-none",
+        full: "hawa-rounded-full",
+        inherit: "hawa-rounded"
+    };
+    var thumbRoundednessStyles = {
+        none: "hawa-rounded-none",
+        full: "hawa-rounded-full",
+        inherit: "hawa-rounded-inner"
+    };
     return /* @__PURE__ */ React15.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-items-center",
         ref: parentRef
     }, /* @__PURE__ */ React15.createElement(SwitchPrimitives.Root, _object_spread_props(_object_spread({
-        className: cn("hawa-relative  hawa-cursor-pointer hawa-rounded-full hawa-bg-primary/20 hawa-outline-none data-[state=checked]:hawa-bg-primary", className, rootSize[size])
+        className: cn("hawa-relative  hawa-cursor-pointer hawa-rounded hawa-bg-primary/20 hawa-outline-none data-[state=checked]:hawa-bg-primary", rootRoundednessStyles[roundedness], className, rootSize[size])
     }, props), {
         ref: ref
     }), /* @__PURE__ */ React15.createElement(SwitchPrimitives.Thumb, {
-        className: cn(thumbSize[size], "hawa-block hawa-rounded-full hawa-bg-white hawa-transition-transform  hawa-duration-100 hawa-will-change-transform data-[state=checked]:hawa-bg-primary-foreground  dark:hawa-bg-background", parentDirection === "rtl" ? "hawa--translate-x-0.5 data-[state=checked]:hawa--translate-x-[19px]" : "hawa-translate-x-0.5 data-[state=checked]:hawa-translate-x-[19px]")
+        className: cn(thumbSize[size], "hawa-block hawa-rounded hawa-bg-white hawa-transition-transform  hawa-duration-100 hawa-will-change-transform data-[state=checked]:hawa-bg-primary-foreground  dark:hawa-bg-background", thumbRoundednessStyles[roundedness], parentDirection === "rtl" ? "hawa--translate-x-0.5 data-[state=checked]:hawa--translate-x-[19px]" : "hawa-translate-x-0.5 data-[state=checked]:hawa-translate-x-[19px]")
     })), label && /* @__PURE__ */ React15.createElement("span", {
         className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300"
     }, label));
@@ -1964,26 +1975,25 @@ var Alert = function(_param) {
         duration
     ]);
     var closeButtonStyle = {
-        none: "hover:hawa-bg-gray-300",
-        info: "hover:hawa-bg-blue-300",
-        warning: "hover:hawa-bg-yellow-300",
-        error: "hover:hawa-bg-red-300",
-        success: "hover:hawa-bg-green-300"
+        none: "",
+        info: "",
+        warning: "",
+        error: "",
+        success: ""
     };
     var styleVariant = {
-        // normal: {
-        none: "hawa-text-gray-700 hawa-bg-gray-100 dark:hawa-bg-gray-200 dark:hawa-text-gray-800",
-        info: "hawa-text-blue-700 hawa-bg-blue-100 dark:hawa-bg-blue-200 dark:hawa-text-blue-800",
-        warning: "hawa-text-yellow-700 hawa-bg-yellow-100 dark:hawa-bg-yellow-200 dark:hawa-text-yellow-800",
-        error: "hawa-text-red-700 hawa-bg-red-100 dark:hawa-bg-red-200 dark:hawa-text-red-800",
-        success: "hawa-text-green-700 hawa-bg-green-100 dark:hawa-bg-green-200 dark:hawa-text-green-800"
+        none: "hawa-text-gray-700 hawa-bg-gray-100 dark:hawa-bg-gray-900 ",
+        info: "hawa-text-info-foreground hawa-bg-info/90",
+        warning: "hawa-text-warning-foreground hawa-bg-warning/90",
+        error: "hawa-text-destructive-foreground hawa-bg-destructive/90",
+        success: "hawa-text-success-foreground hawa-bg-success/90"
     };
     return /* @__PURE__ */ import_react13.default.createElement("div", {
         ref: alertRef
     }, /* @__PURE__ */ import_react13.default.createElement("div", {
-        className: (0, import_clsx6.default)("hawa-relative hawa-mb-4 hawa-flex hawa-flex-col hawa-rounded hawa-p-4 hawa-text-sm hawa-transition-all", styleVariant[severity], closed ? "hawa-opacity-0" : "hawa-opacity-100", className),
         role: "alert",
-        dir: direction
+        dir: direction,
+        className: (0, import_clsx6.default)("hawa-relative hawa-mb-4 hawa-flex hawa-flex-col hawa-rounded hawa-p-4 hawa-text-sm hawa-transition-all", styleVariant[severity], closed ? "hawa-opacity-0" : "hawa-opacity-100", className)
     }, /* @__PURE__ */ import_react13.default.createElement("div", {
         className: "hawa-flex hawa-flex-row"
     }, icon && /* @__PURE__ */ import_react13.default.createElement("div", {
@@ -2002,7 +2012,7 @@ var Alert = function(_param) {
         }, act.label);
     })))), !props.persistant && /* @__PURE__ */ import_react13.default.createElement("button", {
         type: "button",
-        className: (0, import_clsx6.default)("hawa-absolute  hawa-top-2 hawa-inline-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded-inner hawa-p-1.5 hawa-text-gray-400 hawa-transition-all  hover:hawa-text-gray-900", closeButtonStyle[severity], direction === "rtl" ? "hawa-left-2" : "hawa-right-2"),
+        className: (0, import_clsx6.default)("hawa-absolute  hawa-top-2 hawa-inline-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded-inner hawa-p-1.5 hawa-transition-all  hover:hawa-text-gray-900", closeButtonStyle[severity], direction === "rtl" ? "hawa-left-2" : "hawa-right-2"),
         "data-dismiss-target": "#alert-default",
         "aria-label": "Close",
         onClick: function() {

package/dist/index.mjs

@@ -1083,41 +1083,63 @@ var thumbSize = {
   sm: "hawa-h-[16px] hawa-w-[16px]",
   lg: "hawa-h-[26px] hawa-w-[26px]"
 };
-var Switch = React15.forwardRef(({ className, size = "default", label, ...props }, ref) => {
-  const [parentDirection, setParentDirection] = React15.useState(
-    null
-  );
-  const parentRef = React15.useRef(null);
-  React15.useEffect(() => {
-    const parentNode = parentRef.current?.parentNode;
-    if (parentNode) {
-      const dir = window.getComputedStyle(parentNode).direction;
-      setParentDirection(dir);
-    }
-  });
-  return /* @__PURE__ */ React15.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center", ref: parentRef }, /* @__PURE__ */ React15.createElement(
-    SwitchPrimitives.Root,
-    {
-      className: cn(
-        "hawa-relative  hawa-cursor-pointer hawa-rounded-full hawa-bg-primary/20 hawa-outline-none data-[state=checked]:hawa-bg-primary",
-        className,
-        rootSize[size]
-      ),
-      ...props,
-      ref
-    },
-    /* @__PURE__ */ React15.createElement(
-      SwitchPrimitives.Thumb,
+var Switch = React15.forwardRef(
+  ({ className, size = "default", roundedness = "inherit", label, ...props }, ref) => {
+    const [parentDirection, setParentDirection] = React15.useState(
+      null
+    );
+    const parentRef = React15.useRef(null);
+    React15.useEffect(() => {
+      const parentNode = parentRef.current?.parentNode;
+      if (parentNode) {
+        const dir = window.getComputedStyle(parentNode).direction;
+        setParentDirection(dir);
+      }
+    });
+    const rootRoundednessStyles = {
+      none: "hawa-rounded-none",
+      full: "hawa-rounded-full",
+      inherit: "hawa-rounded"
+    };
+    const thumbRoundednessStyles = {
+      none: "hawa-rounded-none",
+      full: "hawa-rounded-full",
+      inherit: "hawa-rounded-inner"
+    };
+    return /* @__PURE__ */ React15.createElement(
+      "div",
       {
-        className: cn(
-          thumbSize[size],
-          "hawa-block hawa-rounded-full hawa-bg-white hawa-transition-transform  hawa-duration-100 hawa-will-change-transform data-[state=checked]:hawa-bg-primary-foreground  dark:hawa-bg-background",
-          parentDirection === "rtl" ? "hawa--translate-x-0.5 data-[state=checked]:hawa--translate-x-[19px]" : "hawa-translate-x-0.5 data-[state=checked]:hawa-translate-x-[19px]"
+        className: "hawa-flex hawa-flex-row hawa-items-center",
+        ref: parentRef
+      },
+      /* @__PURE__ */ React15.createElement(
+        SwitchPrimitives.Root,
+        {
+          className: cn(
+            "hawa-relative  hawa-cursor-pointer hawa-rounded hawa-bg-primary/20 hawa-outline-none data-[state=checked]:hawa-bg-primary",
+            rootRoundednessStyles[roundedness],
+            className,
+            rootSize[size]
+          ),
+          ...props,
+          ref
+        },
+        /* @__PURE__ */ React15.createElement(
+          SwitchPrimitives.Thumb,
+          {
+            className: cn(
+              thumbSize[size],
+              "hawa-block hawa-rounded hawa-bg-white hawa-transition-transform  hawa-duration-100 hawa-will-change-transform data-[state=checked]:hawa-bg-primary-foreground  dark:hawa-bg-background",
+              thumbRoundednessStyles[roundedness],
+              parentDirection === "rtl" ? "hawa--translate-x-0.5 data-[state=checked]:hawa--translate-x-[19px]" : "hawa-translate-x-0.5 data-[state=checked]:hawa-translate-x-[19px]"
+            )
+          }
         )
-      }
-    )
-  ), label && /* @__PURE__ */ React15.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label));
-});
+      ),
+      label && /* @__PURE__ */ React15.createElement("span", { className: "hawa-mx-2 hawa-text-sm hawa-font-medium hawa-text-gray-900 dark:hawa-text-gray-300" }, label)
+    );
+  }
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // components/elements/Radio.tsx
@@ -1413,31 +1435,30 @@ var Alert = ({
     }
   }, [duration]);
   let closeButtonStyle = {
-    none: "hover:hawa-bg-gray-300",
-    info: "hover:hawa-bg-blue-300",
-    warning: "hover:hawa-bg-yellow-300",
-    error: "hover:hawa-bg-red-300",
-    success: "hover:hawa-bg-green-300"
+    none: "",
+    info: "",
+    warning: "",
+    error: "",
+    success: ""
   };
   let styleVariant = {
-    // normal: {
-    none: "hawa-text-gray-700 hawa-bg-gray-100 dark:hawa-bg-gray-200 dark:hawa-text-gray-800",
-    info: "hawa-text-blue-700 hawa-bg-blue-100 dark:hawa-bg-blue-200 dark:hawa-text-blue-800",
-    warning: "hawa-text-yellow-700 hawa-bg-yellow-100 dark:hawa-bg-yellow-200 dark:hawa-text-yellow-800",
-    error: "hawa-text-red-700 hawa-bg-red-100 dark:hawa-bg-red-200 dark:hawa-text-red-800",
-    success: "hawa-text-green-700 hawa-bg-green-100 dark:hawa-bg-green-200 dark:hawa-text-green-800"
+    none: "hawa-text-gray-700 hawa-bg-gray-100 dark:hawa-bg-gray-900 ",
+    info: "hawa-text-info-foreground hawa-bg-info/90",
+    warning: "hawa-text-warning-foreground hawa-bg-warning/90",
+    error: "hawa-text-destructive-foreground hawa-bg-destructive/90",
+    success: "hawa-text-success-foreground hawa-bg-success/90"
   };
   return /* @__PURE__ */ React20.createElement("div", { ref: alertRef }, /* @__PURE__ */ React20.createElement(
     "div",
     {
+      role: "alert",
+      dir: direction,
       className: clsx6(
         "hawa-relative hawa-mb-4 hawa-flex hawa-flex-col hawa-rounded hawa-p-4 hawa-text-sm hawa-transition-all",
         styleVariant[severity],
         closed ? "hawa-opacity-0" : "hawa-opacity-100",
         className
-      ),
-      role: "alert",
-      dir: direction
+      )
     },
     /* @__PURE__ */ React20.createElement("div", { className: "hawa-flex hawa-flex-row" }, icon && /* @__PURE__ */ React20.createElement(
       "div",
@@ -1468,7 +1489,7 @@ var Alert = ({
       {
         type: "button",
         className: clsx6(
-          "hawa-absolute  hawa-top-2 hawa-inline-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded-inner hawa-p-1.5 hawa-text-gray-400 hawa-transition-all  hover:hawa-text-gray-900",
+          "hawa-absolute  hawa-top-2 hawa-inline-flex hawa-h-9 hawa-w-9 hawa-items-center hawa-justify-center hawa-rounded-inner hawa-p-1.5 hawa-transition-all  hover:hawa-text-gray-900",
           closeButtonStyle[severity],
           direction === "rtl" ? "hawa-left-2" : "hawa-right-2"
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.8.11-next",
+  "version": "0.8.13-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {