@ztwoint/z-ui 0.1.38 → 0.1.40

package/dist/components/assets/icons/chevron-up-icon.d.ts

@@ -4,4 +4,4 @@ type IconProps = SVGProps<SVGSVGElement> & {
     title?: string;
 };
 export declare const ChevronUpIcon: ({ fill, title, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export default ChevronUpIcon;

package/dist/components/assets/icons/chevron-up-icon.js

@@ -1,12 +1,12 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-const s = ({ fill: o = "currentColor", title: e = "", ...t }) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
-  /* @__PURE__ */ r("title", { children: e }),
-  /* @__PURE__ */ r("g", { fill: o, children: /* @__PURE__ */ r(
+const s = ({ fill: e = "currentColor", title: o = "", ...t }) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+  /* @__PURE__ */ r("title", { children: o }),
+  /* @__PURE__ */ r("g", { fill: e, children: /* @__PURE__ */ r(
     "path",
     {
       d: "M11.55 8.75l-4.55-4.55-4.55 4.55",
       fill: "none",
-      stroke: o,
+      stroke: e,
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: "2"
@@ -14,5 +14,6 @@ const s = ({ fill: o = "currentColor", title: e = "", ...t }) => /* @__PURE__ */
   ) })
 ] });
 export {
-  s as ChevronUpIcon
+  s as ChevronUpIcon,
+  s as default
 };

package/dist/components/assets/icons/info-icon.d.ts

@@ -3,4 +3,4 @@ type IconProps = SVGProps<SVGSVGElement> & {
     title?: string;
 };
 export declare const InfoIcon: ({ fill, title, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export default InfoIcon;

package/dist/components/assets/icons/info-icon.js

@@ -1,6 +1,6 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-const l = ({ fill: o = "currentColor", title: C = "Info", ...t }) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
-  /* @__PURE__ */ e("title", { children: C }),
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+const r = ({ fill: o = "currentColor", title: t = "Info", ...C }) => /* @__PURE__ */ l("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...C, children: [
+  /* @__PURE__ */ e("title", { children: t }),
   /* @__PURE__ */ e(
     "path",
     {
@@ -12,5 +12,6 @@ const l = ({ fill: o = "currentColor", title: C = "Info", ...t }) => /* @__PURE_
   )
 ] });
 export {
-  l as InfoIcon
+  r as InfoIcon,
+  r as default
 };

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | null | undefined;
+    color?: "default" | "success" | "warning" | "destructive" | "primary" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+declare function Badge({ className, variant, size, color, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/badge/badge.js

@@ -0,0 +1,121 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as n } from "@radix-ui/react-slot";
+import { cva as c } from "class-variance-authority";
+import "react";
+import { cn as u } from "../../lib/utils.js";
+const l = c(
+  "inline-flex rounded-lg items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        destructive: "border-transparent",
+        outline: ""
+      },
+      size: {
+        default: "px-[8px] py-[3px] text-sm",
+        xs: "px-[4px] py-[1px] text-[10px]",
+        sm: "px-[6px] py-[2px] text-xs",
+        lg: "px-[10px] py-[4px] text-base"
+      },
+      color: {
+        default: "",
+        primary: "surface-neutral-default text-default-brand [a&]:hover:surface-neutral-hover",
+        destructive: "surface-danger-default text-inverted-primary [a&]:hover:surface-danger-hover",
+        success: "surface-success-default text-inverted-primary [a&]:hover:surface-success-hover",
+        warning: "surface-warning-default text-inverted-primary [a&]:hover:surface-warning-hover"
+      }
+    },
+    compoundVariants: [
+      // Default variant with different colors
+      {
+        variant: "default",
+        color: "default",
+        class: "surface-neutral-hover [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "default",
+        color: "primary",
+        class: "surface-primary-light text-default-brand [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "default",
+        color: "destructive",
+        class: "surface-danger-light text-danger-secondary [a&]:hover:surface-danger-hover"
+      },
+      {
+        variant: "default",
+        color: "success",
+        class: "surface-success-light text-success-secondary [a&]:hover:surface-success-hover"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        class: "surface-warning-light text-warning-secondary [a&]:hover:surface-warning-hover"
+      },
+      // Destructive variant with different colors
+      {
+        variant: "destructive",
+        color: "default",
+        class: "surface-neutral-primary text-inverted-primary [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "destructive",
+        color: "primary",
+        class: "surface-primary-default text-inverted-primary [a&]:hover:surface-primary-hover"
+      },
+      // Outline variant with different colors
+      {
+        variant: "outline",
+        color: "default",
+        class: "surface-neutral-default text-neutral-primary border-stroke-solid-high [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "outline",
+        color: "primary",
+        class: "surface-primary-light text-default-brand border-stroke-inverted-active [a&]:hover:surface-neutral-hover"
+      },
+      {
+        variant: "outline",
+        color: "destructive",
+        class: "surface-danger-light text-danger-secondary border border-red-200 [a&]:hover:surface-danger-light-hover"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        class: "surface-success-light text-success-secondary border border-green-200 [a&]:hover:surface-success-light-hover"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        class: "surface-warning-light text-warning-secondary border border-amber-200 [a&]:hover:surface-warning-light-hover"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      color: "default"
+    }
+  }
+);
+function x({
+  className: r,
+  variant: e,
+  size: a,
+  color: t,
+  asChild: s = !1,
+  ...o
+}) {
+  return /* @__PURE__ */ i(
+    s ? n : "span",
+    {
+      "data-slot": "badge",
+      className: u(l({ variant: e, size: a, color: t }), r),
+      ...o
+    }
+  );
+}
+export {
+  x as Badge,
+  l as badgeVariants
+};

package/dist/components/icon-showcase/icon-showcase.d.ts

@@ -0,0 +1,2 @@
+import { IconShowcaseProps } from './icon-showcase.type';
+export declare function IconShowcase({ searchValue: controlledSearchValue, onSearchChange, iconSize, className, }: IconShowcaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon-showcase/icon-showcase.hook.d.ts

@@ -0,0 +1,8 @@
+import { IconInfo } from './icon-showcase.type';
+export declare function useIconShowcase(icons: IconInfo[], controlledSearchValue?: string): {
+    searchValue: string;
+    setSearchValue: import('react').Dispatch<import('react').SetStateAction<string>>;
+    filteredIcons: IconInfo[];
+    totalCount: number;
+    filteredCount: number;
+};

package/dist/components/icon-showcase/icon-showcase.type.d.ts

@@ -0,0 +1,11 @@
+export interface IconInfo {
+    name: string;
+    component: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    fileName: string;
+}
+export interface IconShowcaseProps {
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    iconSize?: number;
+    className?: string;
+}

package/dist/components/icon-showcase/icons-list.d.ts

@@ -0,0 +1 @@
+export declare const iconFilenames: string[];

package/dist/css/config/colors/surfaces.css

@@ -5,6 +5,10 @@
   background-color: var(--color-neutral-00);
 }
 
+@utility surface-neutral-primary {
+  background-color: var(--color-neutral-950);
+}
+
 @utility surface-neutral-hover {
   background-color: var(--color-neutral-50);
 }
@@ -72,6 +76,14 @@
   background-color: var(--color-neutral-100);
 }
 
+@utility surface-danger-light {
+  background-color: var(--color-red-50);
+}
+
+@utility surface-danger-light-hover {
+  background-color: var(--color-red-100);
+}
+
 /* Success surfaces */
 @utility surface-success-default {
   background-color: var(--color-green-600);
@@ -89,6 +101,13 @@
   background-color: var(--color-neutral-100);
 }
 
+@utility surface-success-light {
+  background-color: var(--color-green-50);
+}
+@utility surface-success-light-hover {
+  background-color: var(--color-green-100);
+}
+
 /* Warning surfaces */
 @utility surface-warning-default {
   background-color: var(--color-amber-600);
@@ -106,6 +125,41 @@
   background-color: var(--color-neutral-100);
 }
 
+@utility surface-warning-light {
+  background-color: var(--color-amber-50);
+}
+
+@utility surface-warning-light-hover {
+  background-color: var(--color-amber-100);
+}
+
+/* Primary surfaces */
+
+/* Warning surfaces */
+@utility surface-primary-default {
+  background-color: var(--color-blue-600);
+}
+
+@utility surface-primary-hover {
+  background-color: var(--color-blue-700);
+}
+
+@utility surface-primary-pressed {
+  background-color: var(--color-blue-400);
+}
+
+@utility surface-primary-disabled {
+  background-color: var(--color-neutral-100);
+}
+
+@utility surface-primary-light-hover {
+  background-color: var(--color-blue-100);
+}
+
+@utility surface-primary-light {
+  background-color: var(--color-blue-50);
+}
+
 /* Purple surfaces */
 @utility surface-purple-default {
   background-color: var(--color-violet-600);