@ztwoint/z-ui 0.1.37 → 0.1.39

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/collapsible-side-nav-bar/side-nav-bar-item.js

@@ -124,7 +124,7 @@ const K = d.forwardRef(
               ...C,
               children: [
                 f && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: f }),
-                c && i && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1", children: i }) }),
+                c && i && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 leading-none-medium-sm tracking-tight text-black relative", children: i }) }),
                 !c || !i ? /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5 flex-1 px-0.5 relative", children: p }) : p,
                 c && n && /* @__PURE__ */ r(D, { children: t ? /* @__PURE__ */ r(
                   M,

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);