@ztwoint/z-ui 0.1.18 → 0.1.20

package/dist/components/assets/icons/apartment-building.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function ApartmentBuildingIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ApartmentBuildingIcon;

package/dist/components/assets/icons/chevron-right.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function ChevronRightIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ChevronRightIcon;

package/dist/components/assets/icons/circle-check.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function CircleCheck({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default CircleCheck;

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

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

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

@@ -1,19 +1,20 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-function h({
-  fill: r = "currentColor",
-  secondaryfill: t,
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+function a({
+  fill: o = "currentColor",
+  secondaryfill: n,
   title: i = "badge 13",
-  ...n
+  ...s
 }) {
-  return t = t || r, /* @__PURE__ */ o("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...n, children: [
+  const t = n || o;
+  return /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...s, children: [
     /* @__PURE__ */ e("title", { children: i }),
-    /* @__PURE__ */ o("g", { fill: r, strokeLinecap: "butt", strokeLinejoin: "miter", strokeMiterlimit: "10", children: [
+    /* @__PURE__ */ r("g", { fill: o, strokeLinecap: "butt", strokeLinejoin: "miter", strokeMiterlimit: "10", children: [
       /* @__PURE__ */ e(
         "path",
         {
           d: "M7.04 11.44c2.43 0 4.4-1.97 4.4-4.4s-1.97-4.4-4.4-4.4-4.4 1.97-4.4 4.4 1.97 4.4 4.4 4.4z",
           fill: "none",
-          stroke: r,
+          stroke: o,
           strokeLinecap: "square",
           strokeWidth: "1"
         }
@@ -54,5 +55,5 @@ function h({
   ] });
 }
 export {
-  h as default
+  a as default
 };

package/dist/components/assets/icons/dots.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function DotsIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default DotsIcon;

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

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

package/dist/components/assets/icons/link.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function LinkIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default LinkIcon;

package/dist/components/assets/icons/list-tree.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function ListTreeIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ListTreeIcon;

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

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+export declare const MagnifierIcon: ({ fill, title, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/assets/icons/pin.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function PinIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default PinIcon;

package/dist/components/assets/icons/slider.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function SliderIcon({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default SliderIcon;

package/dist/components/assets/icons/vector.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function Vector({ fill, secondaryfill: _secondaryfill, strokewidth, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Vector;

package/dist/components/dropdown/helpers/hover-card.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/components/dropdown/z2-dropdown.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+interface DropdownContextType {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+    value: string;
+    setSelectedValue: (value: string) => void;
+    onValueChange?: (value: string) => void;
+}
+export declare const DropdownContext: React.Context<DropdownContextType | undefined>;
+declare function Z2Dropdown({ defaultOpen, value, onValueChange, ...props }: React.ComponentProps<typeof PopoverPrimitive.Root> & {
+    defaultOpen?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2DropdownInput({ onSearchChange, placeholder, className, selectedIcon, }: {
+    onSearchChange?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    selectedIcon?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2DropdownContent({ className, align, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export interface Z2DropdownItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+    label?: string;
+    value: string;
+    disabled?: boolean;
+    disablePopoverClose?: boolean;
+    hoverComponent?: React.ReactNode;
+}
+declare function Z2DropdownItem({ icon, label, value, hoverComponent, disablePopoverClose, }: Z2DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+declare function Z2DropdownSub({ ...componentProps }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DropdownSubTrigger({ value, label, icon, isSelected, }: Z2DropdownItemProps & {
+    isSelected?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2DropdownSubContent({ className, align, sideOffset, side, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Z2DropdownSubItem({ ...props }: Z2DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export { Z2Dropdown, Z2DropdownInput, Z2DropdownContent, Z2DropdownItem, Z2DropdownSub, Z2DropdownSubTrigger, Z2DropdownSubContent, Z2DropdownSubItem, };

package/dist/components/dropdown-menu/z2-dropdown-menu.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu as Z2DropdownMenu, DropdownMenuPortal as Z2DropdownMenuPortal, DropdownMenuTrigger as Z2DropdownMenuTrigger, DropdownMenuContent as Z2DropdownMenuContent, DropdownMenuGroup as Z2DropdownMenuGroup, DropdownMenuLabel as Z2DropdownMenuLabel, DropdownMenuItem as Z2DropdownMenuItem, DropdownMenuCheckboxItem as Z2DropdownMenuCheckboxItem, DropdownMenuRadioGroup as Z2DropdownMenuRadioGroup, DropdownMenuRadioItem as Z2DropdownMenuRadioItem, DropdownMenuSeparator as Z2DropdownMenuSeparator, DropdownMenuShortcut as Z2DropdownMenuShortcut, DropdownMenuSub as Z2DropdownMenuSub, DropdownMenuSubTrigger as Z2DropdownMenuSubTrigger, DropdownMenuSubContent as Z2DropdownMenuSubContent, };

package/dist/components/select/z2-select.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as Z2SelectPrimitive from '@radix-ui/react-select';
+declare function Z2Select({ ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectGroup({ className, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectValue({ className, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Value & {
+    rightIcon?: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Trigger> & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectLabel({ className, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+type Z2SelectItemProps = React.ComponentProps<typeof Z2SelectPrimitive.Item> & {
+    leftIcon?: React.ReactNode;
+    label?: string;
+};
+declare function Z2SelectItem({ className, children, leftIcon, label, ...props }: Z2SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectSeparator({ className, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function Z2SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Z2SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Z2Select, Z2SelectContent, Z2SelectGroup, Z2SelectItem, Z2SelectLabel, Z2SelectScrollDownButton, Z2SelectScrollUpButton, Z2SelectSeparator, Z2SelectTrigger, Z2SelectValue, };

package/dist/components/select/z2-select.js

@@ -0,0 +1,165 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-select";
+import { ChevronDownIcon as n, ChevronUpIcon as d } from "lucide-react";
+import { cn as c } from "../../lib/utils.js";
+import u from "../assets/icons/circle-check-filled.js";
+function N({ ...e }) {
+  return /* @__PURE__ */ t(r.Root, { "data-slot": "select", ...e });
+}
+function x({
+  className: e,
+  ...l
+}) {
+  return /* @__PURE__ */ t(
+    r.Group,
+    {
+      "data-slot": "select-group",
+      className: c("z2-select-group", e),
+      ...l
+    }
+  );
+}
+function S({
+  className: e,
+  ...l
+}) {
+  return /* @__PURE__ */ t(
+    r.Value,
+    {
+      "data-slot": "select-value",
+      className: c(e, "z2-select-value"),
+      ...l
+    }
+  );
+}
+function g({
+  className: e,
+  size: l = "default",
+  children: s,
+  ...a
+}) {
+  return /* @__PURE__ */ o(
+    r.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": l,
+      className: c("z2-select-trigger", e),
+      ...a,
+      children: [
+        s,
+        /* @__PURE__ */ t(r.Icon, { asChild: !0, children: /* @__PURE__ */ t(n, { className: "z2-trigger-icon" }) })
+      ]
+    }
+  );
+}
+function z({
+  className: e,
+  children: l,
+  position: s = "popper",
+  ...a
+}) {
+  return /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
+    r.Content,
+    {
+      "data-slot": "select-content",
+      className: c("z2-select-content", e),
+      sideOffset: 10,
+      position: s,
+      ...a,
+      children: /* @__PURE__ */ t(r.Viewport, { className: "!w-full ", children: l })
+    }
+  ) });
+}
+function Z({
+  className: e,
+  ...l
+}) {
+  return /* @__PURE__ */ t(
+    r.Label,
+    {
+      "data-slot": "select-label",
+      className: c("z2-select-label", e),
+      ...l
+    }
+  );
+}
+function b({ className: e, children: l, leftIcon: s, label: a, ...i }) {
+  return /* @__PURE__ */ o(
+    r.Item,
+    {
+      "data-slot": "select-item",
+      className: c("z2-select-item", e),
+      ...i,
+      children: [
+        /* @__PURE__ */ t(r.ItemText, { asChild: !0, children: /* @__PURE__ */ o("div", { className: "z2-select-item-text", children: [
+          s && /* @__PURE__ */ t("div", { className: "flex w-[14px] h-[14px] items-center justify-center", children: s }),
+          /* @__PURE__ */ t("div", { className: "flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px] ", children: l || a })
+        ] }) }),
+        /* @__PURE__ */ t(
+          r.ItemIndicator,
+          {
+            "data-slot": "select-item-indicator",
+            className: "z2-select-item-indicator",
+            children: /* @__PURE__ */ t(u, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function v({
+  className: e,
+  ...l
+}) {
+  return /* @__PURE__ */ t(
+    r.Separator,
+    {
+      "data-slot": "select-separator",
+      className: c(
+        "border-t-[0.5px] border-solid border-[color(display-p3_0.9059_0.9059_0.9059)] my-0 -mx-1",
+        e
+      ),
+      ...l
+    }
+  );
+}
+function w({
+  className: e,
+  ...l
+}) {
+  return /* @__PURE__ */ t(
+    r.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: c("flex cursor-default items-center justify-center py-1", e),
+      ...l,
+      children: /* @__PURE__ */ t(d, { className: "size-4" })
+    }
+  );
+}
+function C({
+  className: e,
+  ...l
+}) {
+  return /* @__PURE__ */ t(
+    r.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: c("flex cursor-default items-center justify-center py-1", e),
+      ...l,
+      children: /* @__PURE__ */ t(n, { className: "size-4" })
+    }
+  );
+}
+export {
+  N as Z2Select,
+  z as Z2SelectContent,
+  x as Z2SelectGroup,
+  b as Z2SelectItem,
+  Z as Z2SelectLabel,
+  C as Z2SelectScrollDownButton,
+  w as Z2SelectScrollUpButton,
+  v as Z2SelectSeparator,
+  g as Z2SelectTrigger,
+  S as Z2SelectValue
+};

package/dist/css/config/colors/components/select.css

@@ -0,0 +1,91 @@
+@layer utilities {
+
+  .z2-select-trigger {
+    @apply flex items-center justify-center w-full text-sm gap-[6px] p-2 rounded-md self-stretch transition-all cursor-pointer;
+    @apply data-[size=sm]:gap-[4px] data-[size=sm]:p-[6px];
+    @apply focus:outline-none outline-none focus-visible:outline-none focus-visible:ring-0;
+    font-size: 14px;
+    line-height: 1;
+    background: var(--input-surface-default, color(display-p3 1 1 1));
+    box-shadow: 0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)), 0px 0px 0px var(--stroke-default, 0.5px) var(--input-stroke-default, color(display-p3 0.8784 0.8784 0.8784));
+  }
+
+  .z2-select-trigger:hover {
+    background: var(--input-surface-hover, color(display-p3 0.9647 0.9647 0.9647));
+    box-shadow: 0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)), 0px 0px 0px var(--stroke-default, 0.5px) var(--input-stroke-hover, color(display-p3 0.8196 0.8196 0.8196));
+  }
+
+  .z2-select-trigger:focus {
+    background: var(--input-surface-pressed, color(display-p3 0.9059 0.9059 0.9059));
+    box-shadow: 0px 1px 2px 0px transparent, 0px 0px 0px var(--stroke-default, 0.5px) transparent;
+  }
+
+  .z2-select-trigger[data-state="open"] {
+    background: var(--input-surface-open, color(display-p3 0.941 0.941 0.941));
+    box-shadow: 0px 2px 4px 0px var(--drop-shadow-10, color(display-p3 0 0 0 / 0.10)), 0px 0px 0px var(--stroke-default, 0.5px) var(--input-stroke-open, color(display-p3 0.6 0.6 0.6));
+  }
+
+  .z2-select-trigger[data-filled="true"] {
+    background: var(--input-surface-filled, color(display-p3 0.9804 0.9804 0.9804));
+    box-shadow: 0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)), 0px 0px 0px var(--stroke-default, 0.5px) var(--input-stroke-filled, color(display-p3 0.7 0.7 0.7));
+  }
+
+  .z2-select-trigger[data-disabled] {
+    background-color: var(--color-neutral-50);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .z2-select-trigger[data-placeholder] {
+    color: var(--text-neutral-muted, color(display-p3 0.5333 0.5333 0.5333));
+    font-size: 14px;
+    font-weight: 450;
+    line-height: 1;
+    letter-spacing: -0.2px;
+  }
+
+  [data-slot="select-value"] {
+    @apply w-full self-center items-start text-left flex gap-1;
+  }
+
+  /* ITEM/CONTENT/GROUP/ICON -- unchanged */
+  .z2-select-item {
+    @apply border-none;
+    @apply w-full relative self-stretch flex items-center justify-between gap-2 cursor-pointer outline-none rounded-md;
+    @apply data-[disabled]:pointer-events-none;
+    padding: var(--spacing-2, 8px);
+  }
+
+  .z2-select-item[data-state="active"],
+  .z2-select-item:hover {
+    background-color: var(--surface-neutral-focused, color(display-p3 0.9412 0.9412 0.9412));
+  }
+
+  .z2-select-content {
+    @apply min-w-[var(--radix-select-trigger-width)] flex flex-col items-start relative z-50 p-1;
+    /* @apply 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; */
+    border-radius: var(--border-radius-rounded-xl, 12px);
+    background: linear-gradient(0deg, var(--background-neutral-on-top, color(display-p3 1 1 1)) 0%, var(--background-neutral-on-top, color(display-p3 1 1 1)) 100%), var(--background-neutral-default, color(display-p3 1 1 1));
+    box-shadow: 0px 16px 32px 0px var(--drop-shadow-10, color(display-p3 0 0 0 / 0.10)), 0px 0px 0px var(--stroke-default, 0.5px) var(--stroke-solid-light, color(display-p3 0.9059 0.9059 0.9059));
+  }
+
+  .z2-select-group {
+    @apply flex w-full flex-col items-start gap-1 relative rounded-none;
+  }
+
+  .z2-trigger-icon {
+    @apply shrink-0;
+    width: 14px;
+    height: 14px;
+    aspect-ratio: 1 / 1;
+    color: var(--color-neutral-400);
+  }
+
+  .z2-select-item-text {
+    @apply flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px];
+  }
+
+  .z2-select-item-indicator {
+    @apply flex w-[14px] h-[14px] items-center justify-center;
+  }
+}

package/dist/css/config/colors/text.css

@@ -138,3 +138,23 @@
 @utility text-default-muted {
   color: var(--color-neutral-400);
 }
+
+@utility text-default-primary {
+  color: var(--color-neutral-950);
+}
+
+@utility text-default-secondary {
+  color: var(--color-neutral-600);
+}
+
+@utility text-default-warning {
+  color: var(--color-amber-600);
+}
+
+@utility text-default-brand {
+  color: var(--color-blue-600);
+}
+
+@utility text-default-success {
+  color: var(--color-emerald-600);
+}

package/dist/css/config/config.css

@@ -14,6 +14,7 @@
 @import './colors/components/button.css';
 @import './colors/components/tab.css';
 @import './colors/components/alert.css';
+@import './colors/components/select.css';
 
 @theme {
   --font-family-sans: 'Inter Variable', sans-serif;