@xjur-ui/react 1.0.6 → 2.0.0

package/dist/components/select.js

@@ -1,550 +1,2 @@
-// src/components/select.tsx
-import * as RadixPopover from "@radix-ui/react-popover";
-import { cx as cx5 } from "@xjur-ui/util";
-
-// src/components/list.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cx, cva as cva2 } from "@xjur-ui/util";
-
-// src/components/typography.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "@xjur-ui/util";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-var typographyVariants = cva("", {
-  variants: {
-    variant: {
-      body: "",
-      label: "",
-      title: "",
-      headline: ""
-    },
-    size: {
-      "sm-2x": "",
-      "sm-1x": "",
-      sm: "",
-      md: "",
-      lg: ""
-    },
-    weight: {
-      thin: "font-thin",
-      extraLight: "font-extralight",
-      light: "font-light",
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold",
-      extraBold: "font-extrabold",
-      black: "font-black"
-    }
-  },
-  compoundVariants: [
-    { variant: "body", size: "sm-1x", class: "text-size-body-sm-1x" },
-    { variant: "body", size: "sm", class: "text-size-body-sm" },
-    { variant: "body", size: "md", class: "text-size-body-md" },
-    { variant: "body", size: "lg", class: "text-size-body-lg" },
-    { variant: "label", size: "sm-2x", class: "text-size-label-sm-2x" },
-    { variant: "label", size: "sm-1x", class: "text-size-label-sm-1x" },
-    { variant: "label", size: "sm", class: "text-size-label-sm" },
-    { variant: "label", size: "md", class: "text-size-label-md" },
-    { variant: "label", size: "lg", class: "text-size-label-lg" },
-    { variant: "title", size: "sm", class: "text-size-title-sm" },
-    { variant: "title", size: "md", class: "text-size-title-md" },
-    { variant: "title", size: "lg", class: "text-size-title-lg" },
-    { variant: "headline", size: "sm", class: "text-size-headline-sm" },
-    { variant: "headline", size: "md", class: "text-size-headline-md" },
-    { variant: "headline", size: "lg", class: "text-size-headline-lg" }
-  ],
-  defaultVariants: {
-    variant: "body",
-    size: "md",
-    weight: "normal"
-  }
-});
-var Typography = memo(
-  ({
-    variant,
-    size,
-    weight,
-    asChild,
-    className,
-    ...props
-  }) => {
-    const Component = asChild ? Slot : "span";
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        className: typographyVariants({ variant, size, weight, className }),
-        ...props
-      }
-    );
-  }
-);
-Typography.displayName = "Typography";
-
-// src/components/list.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function ListRoot({
-  className,
-  asChild,
-  ...props
-}) {
-  const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx2(
-    Comp,
-    {
-      ...props,
-      className: cx(
-        className,
-        "rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-10 max-h-[400px] list-none overflow-y-auto border"
-      )
-    }
-  );
-}
-function ListHeader({
-  className,
-  asChild,
-  ...props
-}) {
-  const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx2(Comp, { ...props, className: cx(className, "px-small pt-small-1x") });
-}
-function ListHeaderTitle({
-  variant = "label",
-  size = "sm",
-  weight = "medium",
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    Typography,
-    {
-      className: cx(className, "text-neutral-placeholder"),
-      size,
-      variant,
-      weight,
-      ...props
-    }
-  );
-}
-function ListContent({
-  className,
-  asChild,
-  ...props
-}) {
-  const Comp = asChild ? Slot2 : "ul";
-  return /* @__PURE__ */ jsx2(
-    Comp,
-    {
-      ...props,
-      className: cx("gap-small-1x p-small flex flex-col", className)
-    }
-  );
-}
-var variants = cva2(
-  [
-    "py-medium px-small flex items-center gap-small rounded-small-1x",
-    "bg-layer-2-idle text-neutral-dark",
-    "hover:bg-layer-2-hover transition-colors duration-100 ease-out",
-    "active:bg-layer-2-pressed"
-  ],
-  {
-    variants: {
-      size: {
-        md: "h-large-4x",
-        lg: "h-large-7x"
-      },
-      isActive: {
-        true: "bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      isActive: false
-    }
-  }
-);
-function ListItem({
-  className,
-  size,
-  isActive,
-  asChild,
-  ...props
-}) {
-  const Comp = asChild ? Slot2 : "li";
-  return /* @__PURE__ */ jsx2(Comp, { ...props, className: cx(variants({ size, isActive }), className) });
-}
-
-// src/components/search-input.tsx
-import { cva as cva4, cx as cx3 } from "@xjur-ui/util";
-import { createContext } from "react";
-
-// src/components/button.tsx
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { cva as cva3, cx as cx2 } from "@xjur-ui/util";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var buttonVariants = cva3(
-  [
-    "outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"
-  ],
-  {
-    variants: {
-      size: {
-        md: "py-small_1x-alt px-medium text-size-body-md",
-        sm: "py-small-1x px-small text-size-label-sm",
-        icon_md: "p-small text-size-body-md h-large-4x w-large-4x",
-        icon_sm: "p-small-1x text-size-label-sm h-large-2x w-large-2x"
-      },
-      variant: {
-        primary: "",
-        secondary: "",
-        tertiary: "",
-        destructive: "",
-        outlined: "bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"
-      },
-      appearance: {
-        solid: "",
-        ghost: "bg-transparent"
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "primary",
-        appearance: "solid",
-        class: "bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"
-      },
-      {
-        variant: "primary",
-        appearance: "ghost",
-        class: "text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"
-      },
-      {
-        variant: "secondary",
-        appearance: "solid",
-        class: "bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"
-      },
-      {
-        variant: "secondary",
-        appearance: "ghost",
-        class: "hover:bg-layer-1-hover active:bg-layer-1-pressed"
-      },
-      {
-        variant: "tertiary",
-        appearance: "solid",
-        class: "bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"
-      },
-      {
-        variant: "tertiary",
-        appearance: "ghost",
-        class: "hover:bg-layer-2-hover active:bg-layer-2-pressed"
-      },
-      {
-        variant: "destructive",
-        appearance: "solid",
-        class: "bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"
-      },
-      {
-        variant: "destructive",
-        appearance: "ghost",
-        class: "text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"
-      }
-    ],
-    defaultVariants: {
-      size: "md",
-      variant: "primary",
-      appearance: "solid"
-    }
-  }
-);
-
-// src/components/search-input.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var SearchInputRootContext = createContext({
-  variant: "outlined"
-});
-function SearchInputRoot({
-  className,
-  variant = "outlined",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(SearchInputRootContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx4("div", { className: cx3(className, "relative flex w-full"), ...props }) });
-}
-function SearchInputContent({
-  className,
-  ...props
-}) {
-  const contentVarians = cva4(
-    [
-      "gap-small py-small_1x-alt px-small flex items-center w-full",
-      "h-large-4x rounded-circle",
-      "border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal",
-      "group-hover:border-border-layer-3 transition-colors duration-200",
-      "disabled:opacity-60",
-      "focus-within:border-primary-idle"
-    ],
-    {
-      variants: {
-        variant: {
-          outlined: "rounded-circle focus-within:border-primary-idle ",
-          line: "rounded-none border-t-0 border-b-1 border-x-0",
-          action: "rounded-tr-none rounded-br-none border-r-0"
-        }
-      }
-    }
-  );
-  return /* @__PURE__ */ jsx4(SearchInputRootContext.Consumer, { children: ({ variant }) => /* @__PURE__ */ jsx4(
-    "div",
-    {
-      className: cx3(className, contentVarians({ variant })),
-      "data-variant": variant,
-      ...props
-    }
-  ) });
-}
-function SearchInputText({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4("input", { className: cx3(className, "flex-1 outline-none"), ...props });
-}
-function SearchInputSlot(props) {
-  return /* @__PURE__ */ jsx4("div", { ...props, "data-slot": "search-input-slot" });
-}
-
-// src/components/icon.tsx
-import { cx as cx4 } from "@xjur-ui/util";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function Icon({ className, filled = false, name, ...props }) {
-  return /* @__PURE__ */ jsx5(
-    "span",
-    {
-      ...props,
-      className: cx4(
-        "material-symbols-outlined",
-        "text-size-body-lg",
-        className
-      ),
-      style: {
-        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
-        ...props.style
-      },
-      children: name
-    }
-  );
-}
-
-// src/components/select.tsx
-import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
-function SelectRoot(props) {
-  return /* @__PURE__ */ jsx6(RadixPopover.Root, { ...props });
-}
-function SelectTrigger({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(
-    RadixPopover.Trigger,
-    {
-      className: cx5(
-        className,
-        "group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center",
-        "bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border",
-        "data-[state=open]:border-primary-idle",
-        "has-[input:not(:placeholder-shown)]:text-primary-idle",
-        "has-[input:not(:placeholder-shown)]:border-primary-idle"
-      ),
-      ...props
-    }
-  );
-}
-function SelectContent({
-  className,
-  children,
-  sideOffset = 4,
-  side = "bottom",
-  align = "start",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(RadixPopover.Portal, { children: /* @__PURE__ */ jsx6(
-    RadixPopover.Content,
-    {
-      align,
-      className: cx5(
-        className,
-        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]"
-      ),
-      side,
-      sideOffset,
-      ...props,
-      children: /* @__PURE__ */ jsx6(ListRoot, { children })
-    }
-  ) });
-}
-function SelectValue({
-  className,
-  displayValue = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!displayValue && /* @__PURE__ */ jsx6(Typography, { className: "text-neutral-dark group-has-[div[data-slot=select-left-slot]]:pl-large-1x", children: displayValue }),
-    /* @__PURE__ */ jsx6(
-      "input",
-      {
-        ...props,
-        "aria-readonly": true,
-        className: cx5(className, "pointer-events-none"),
-        hidden: true,
-        placeholder: props.placeholder ?? " ",
-        readOnly: true
-      }
-    )
-  ] });
-}
-function SelectMultiValue({
-  className,
-  values,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx5(
-        className,
-        "gap-small-1x scrollbar-hide group-has-[div[data-slot=select-left-slot]]:pl-large-1x overflow-x-small flex"
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx6(
-          "input",
-          {
-            "aria-readonly": true,
-            className: cx5(className, "pointer-events-none"),
-            hidden: true,
-            placeholder: " ",
-            readOnly: true,
-            value: values.join(",")
-          }
-        )
-      ]
-    }
-  );
-}
-function SelectLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(
-    Typography,
-    {
-      asChild: true,
-      className: cx5(
-        "inline-block max-w-full truncate text-left font-normal",
-        "left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2",
-        "ease transition-all duration-250",
-        // Content Open
-        "group-data-[state=open]:text-primary-idle",
-        "group-data-[state=open]:-top-[3px]",
-        "group-data-[state=open]:text-size-label-sm-1x",
-        "group-data-[state=open]:font-medium",
-        // Filled
-        "group-has-[input:not(:placeholder-shown)]:text-primary-idle",
-        "group-has-[input:not(:placeholder-shown)]:-top-[3px]",
-        "group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x",
-        "group-has-[input:not(:placeholder-shown)]:font-medium",
-        // If has left slot
-        "group-has-[div[data-slot=select-left-slot]]:left-large-4x",
-        "group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small",
-        "group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
-        // If has right slot
-        "group-has-[div[data-slot=select-right-slot]]:right-large-4x",
-        "group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small",
-        "group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small",
-        // Animate
-        "group-data-[state=open]:animate-in",
-        "group-data-[state=closed]:animate-out",
-        "group-has-[input:not(:placeholder-shown)]:animate-out",
-        className
-      ),
-      weight: "medium",
-      ...props,
-      children: /* @__PURE__ */ jsx6("label", { htmlFor, children: /* @__PURE__ */ jsx6("span", { className: "bg-layer-2-idle rounded-small-1x max-w-full", children }) })
-    }
-  );
-}
-function SelectOptions(props) {
-  return /* @__PURE__ */ jsx6(ListContent, { ...props });
-}
-function SelectOption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(ListItem, { className: cx5(className, "cursor-pointer"), ...props });
-}
-function SelectOptionText(props) {
-  return /* @__PURE__ */ jsx6(Typography, { ...props });
-}
-function SelectHeader(props) {
-  return /* @__PURE__ */ jsx6(ListHeader, { ...props });
-}
-function SelectHeaderTitle(props) {
-  return /* @__PURE__ */ jsx6(ListHeaderTitle, { ...props });
-}
-function SelectDropdown(props) {
-  return /* @__PURE__ */ jsx6("div", { ...props });
-}
-function SelectLeftSlot({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      ...props,
-      className: cx5(
-        className,
-        "left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "select-left-slot"
-    }
-  );
-}
-function SelectRightSlot({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      ...props,
-      className: cx5(
-        className,
-        "right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "select-right-slot"
-    }
-  );
-}
-function SelectSearch(props) {
-  return /* @__PURE__ */ jsx6(SearchInputRoot, { variant: "line", children: /* @__PURE__ */ jsxs(SearchInputContent, { children: [
-    /* @__PURE__ */ jsx6(SearchInputSlot, { children: /* @__PURE__ */ jsx6(Icon, { className: "text-icon-neutral-3", name: "search" }) }),
-    /* @__PURE__ */ jsx6(SearchInputText, { ...props })
-  ] }) });
-}
-export {
-  SelectContent,
-  SelectDropdown,
-  SelectHeader,
-  SelectHeaderTitle,
-  SelectLabel,
-  SelectLeftSlot,
-  SelectMultiValue,
-  SelectOption,
-  SelectOptionText,
-  SelectOptions,
-  SelectRightSlot,
-  SelectRoot,
-  SelectSearch,
-  SelectTrigger,
-  SelectValue
-};
+import {a as a$2,b as b$1,e as e$1,d as d$2}from'../chunk-NPTLORW5.js';import {a,d as d$1,e,b,c}from'../chunk-KIFR5VIE.js';import'../chunk-FASEHVMD.js';import {a as a$1}from'../chunk-EIG6CBTQ.js';import {b as b$2}from'../chunk-SHHXKVVR.js';import {createContext,useContext}from'react';import*as n from'@radix-ui/react-popover';import {twMerge,tv}from'@xjur-ui/util';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var P=createContext({disabled:false,hasError:false});function d(){let e=useContext(P);if(!e)throw new Error("useSelect must be used within a SelectRoot");return e}function k({disabled:e=false,hasError:o=false,...r}){return jsx(P.Provider,{value:{disabled:e,hasError:o},children:jsx(n.Root,{...r})})}function j({className:e,...o}){let{disabled:r,hasError:l}=d();return jsx(n.Trigger,{className:twMerge(e,"group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center","bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border","data-[state=open]:border-primary-idle data-[state=open]:data-[has-error=true]:border-danger-label-active","has-[input:not(:placeholder-shown)]:text-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:text-danger-label-active","has-[input:not(:placeholder-shown)]:border-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:border-danger-label-active","disabled:bg-layer-2-idle disabled:cursor-text disabled:border-none disabled:select-text","data-[has-error=true]:border-danger-idle data-[has-error=true]:hover:border-danger-idle"),...o,"data-has-error":l,disabled:r})}function F({className:e,children:o,sideOffset:r=4,side:l="bottom",align:s="start",...i}){return jsx(n.Portal,{children:jsx(n.Content,{align:s,className:twMerge(e,"group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]"),side:l,sideOffset:r,...i,children:jsx(a,{children:o})})})}function M({className:e,displayValue:o="",...r}){return jsxs(Fragment,{children:[!!o&&jsx(a$1,{className:twMerge(e,"text-neutral-dark","group-has-[div[data-slot=select-left-slot]]:pl-large-1x"),children:o}),jsx("input",{...r,"aria-readonly":true,className:twMerge(e,"pointer-events-none"),hidden:true,placeholder:r.placeholder??" ",readOnly:true})]})}function V({className:e,values:o,children:r,...l}){return jsxs("div",{className:twMerge(e,"gap-small-1x scrollbar-hide overflow-x-small flex","group-has-[div[data-slot=select-left-slot]]:pl-large-1x","group-disabled:!pl-0"),...l,children:[r,jsx("input",{"aria-readonly":true,className:twMerge(e,"pointer-events-none"),hidden:true,placeholder:" ",readOnly:true,value:o.join(",")})]})}function _({className:e,htmlFor:o,children:r,...l}){let{hasError:s}=d();return jsx(a$1,{asChild:true,className:twMerge("inline-block max-w-full truncate text-left font-normal","left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2","ease transition-all duration-250","group-data-[state=open]:!text-primary-idle group-data-[state=open]:data-[has-error=true]:!text-danger-label-active","group-data-[state=open]:-top-[3px]","group-data-[state=open]:text-size-label-sm-1x","group-data-[state=open]:font-medium","group-has-[input:not(:placeholder-shown)]:!text-primary-idle group-has-[input:not(:placeholder-shown)]:data-[has-error=true]:!text-danger-label-active","group-has-[input:not(:placeholder-shown)]:-top-[3px]","group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x","group-has-[input:not(:placeholder-shown)]:font-medium","group-has-[div[data-slot=select-left-slot]]:left-large-4x","group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small","group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small","group-has-[div[data-slot=select-right-slot]]:right-large-4x","group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small","group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small","group-data-[state=open]:animate-in","group-data-[state=closed]:animate-out","group-has-[input:not(:placeholder-shown)]:animate-out","group-disabled:hidden",e),"data-has-error":s,...l,children:jsx("label",{htmlFor:o,children:jsx("span",{className:"bg-layer-2-idle rounded-small-1x max-w-full",children:r})})})}function q(e){return jsx(d$1,{...e})}function A({className:e$1,...o}){return jsx(e,{className:twMerge(e$1,"cursor-pointer"),...o})}function B(e){return jsx(a$1,{...e})}function D(e){return jsx(b,{...e})}function G(e){return jsx(c,{...e})}function J({className:e,...o}){return jsx("div",{...o,className:twMerge(e,"left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"),"data-slot":"select-left-slot"})}function K({className:e,...o}){return jsx("div",{...o,className:twMerge(e,"right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center","group-disabled:hidden"),"data-slot":"select-right-slot"})}function Q(e){return jsx(a$2,{variant:"line",children:jsxs(b$1,{children:[jsx(e$1,{children:jsx(b$2,{className:"text-icon-neutral-3",name:"search"})}),jsx(d$2,{...e})]})})}function U({className:e,variant:o="body",size:r="sm",weight:l="normal",...s}){let{hasError:i}=d(),C=tv({base:"text-size-body-sm mt-small-1x font-normal",variants:{state:{error:"text-danger-label-active",idle:"text-neutral-dark"}}});return jsx(a$1,{className:C({state:i?"error":"idle",className:e}),size:r,variant:o,weight:l,...s})}export{U as SelectCaption,F as SelectContent,D as SelectHeader,G as SelectHeaderTitle,_ as SelectLabel,J as SelectLeftSlot,V as SelectMultiValue,A as SelectOption,B as SelectOptionText,q as SelectOptions,K as SelectRightSlot,k as SelectRoot,Q as SelectSearch,j as SelectTrigger,M as SelectValue};//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/select.tsx"],"names":["SelectContext","createContext","useSelect","context","useContext","SelectRoot","disabled","hasError","props","jsx","SelectTrigger","className","twMerge","SelectContent","children","sideOffset","side","align","ListRoot","SelectValue","displayValue","jsxs","Fragment","Typography","SelectMultiValue","values","SelectLabel","htmlFor","SelectOptions","ListContent","SelectOption","ListItem","SelectOptionText","SelectHeader","ListHeader","SelectHeaderTitle","ListHeaderTitle","SelectLeftSlot","SelectRightSlot","SelectSearch","SearchInputRoot","SearchInputContent","SearchInputSlot","Icon","SearchInputText","SelectCaption","variant","size","weight","caption","tv"],"mappings":"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","file":"select.js","sourcesContent":["import { createContext, useContext, type ComponentProps } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport { tv, twMerge } from '@xjur-ui/util'\nimport {\n  ListContent,\n  ListItem,\n  ListRoot,\n  ListHeader,\n  ListHeaderTitle\n} from './list'\nimport {\n  SearchInputContent,\n  SearchInputText,\n  SearchInputRoot,\n  SearchInputSlot\n} from './search-input'\nimport { Icon } from './icon'\nimport { Typography, type TypographyProps } from './typography'\n\nconst SelectContext = createContext({\n  disabled: false,\n  hasError: false\n})\n\nfunction useSelect() {\n  const context = useContext(SelectContext)\n\n  if (!context) {\n    throw new Error('useSelect must be used within a SelectRoot')\n  }\n\n  return context\n}\n\nexport function SelectRoot({\n  disabled = false,\n  hasError = false,\n  ...props\n}: ComponentProps<typeof RadixPopover.Root> & {\n  disabled?: boolean\n  hasError?: boolean\n}) {\n  return (\n    <SelectContext.Provider value={{ disabled, hasError }}>\n      <RadixPopover.Root {...props} />\n    </SelectContext.Provider>\n  )\n}\n\nexport function SelectTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof RadixPopover.Trigger>) {\n  const { disabled, hasError } = useSelect()\n\n  return (\n    <RadixPopover.Trigger\n      className={twMerge(\n        className,\n        'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',\n        'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',\n        'data-[state=open]:border-primary-idle data-[state=open]:data-[has-error=true]:border-danger-label-active',\n        'has-[input:not(:placeholder-shown)]:text-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:text-danger-label-active',\n        'has-[input:not(:placeholder-shown)]:border-primary-idle has-[input:not(:placeholder-shown)]:data-[has-error=true]:border-danger-label-active',\n        'disabled:bg-layer-2-idle disabled:cursor-text disabled:border-none disabled:select-text',\n        'data-[has-error=true]:border-danger-idle data-[has-error=true]:hover:border-danger-idle'\n      )}\n      {...props}\n      data-has-error={hasError}\n      disabled={disabled}\n    />\n  )\n}\n\nexport function SelectContent({\n  className,\n  children,\n  sideOffset = 4,\n  side = 'bottom',\n  align = 'start',\n  ...props\n}: ComponentProps<typeof RadixPopover.Content>) {\n  return (\n    <RadixPopover.Portal>\n      <RadixPopover.Content\n        align={align}\n        className={twMerge(\n          className,\n          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'\n        )}\n        side={side}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <ListRoot>{children}</ListRoot>\n      </RadixPopover.Content>\n    </RadixPopover.Portal>\n  )\n}\n\nexport function SelectValue({\n  className,\n  displayValue = '',\n  ...props\n}: ComponentProps<'input'> & { displayValue?: string }) {\n  return (\n    <>\n      {!!displayValue && (\n        <Typography\n          className={twMerge(\n            className,\n            'text-neutral-dark',\n            // if has left slot, add the left slot padding\n            'group-has-[div[data-slot=select-left-slot]]:pl-large-1x'\n          )}\n        >\n          {displayValue}\n        </Typography>\n      )}\n\n      <input\n        {...props}\n        aria-readonly={true}\n        className={twMerge(className, 'pointer-events-none')}\n        hidden={true}\n        placeholder={props.placeholder ?? ' '}\n        readOnly={true}\n      />\n    </>\n  )\n}\n\nexport function SelectMultiValue({\n  className,\n  values,\n  children,\n  ...props\n}: ComponentProps<'div'> & { values: string[] }) {\n  return (\n    <div\n      className={twMerge(\n        className,\n        'gap-small-1x scrollbar-hide overflow-x-small flex',\n        // if has left slot, add the left slot padding\n        'group-has-[div[data-slot=select-left-slot]]:pl-large-1x',\n        // if the trigger is disabled, remove the left slot padding\n        'group-disabled:!pl-0'\n      )}\n      {...props}\n    >\n      {children}\n\n      <input\n        aria-readonly={true}\n        className={twMerge(className, 'pointer-events-none')}\n        hidden={true}\n        placeholder={' '}\n        readOnly={true}\n        value={values.join(',')}\n      />\n    </div>\n  )\n}\n\nexport function SelectLabel({\n  className,\n  htmlFor,\n  children,\n  ...props\n}: TypographyProps & { htmlFor?: string }) {\n  const { hasError } = useSelect()\n\n  return (\n    <Typography\n      asChild={true}\n      className={twMerge(\n        'inline-block max-w-full truncate text-left font-normal',\n        'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',\n        'ease transition-all duration-250',\n        // Content Open\n        'group-data-[state=open]:!text-primary-idle group-data-[state=open]:data-[has-error=true]:!text-danger-label-active',\n        'group-data-[state=open]:-top-[3px]',\n        'group-data-[state=open]:text-size-label-sm-1x',\n        'group-data-[state=open]:font-medium',\n        // Filled\n        'group-has-[input:not(:placeholder-shown)]:!text-primary-idle group-has-[input:not(:placeholder-shown)]:data-[has-error=true]:!text-danger-label-active',\n        'group-has-[input:not(:placeholder-shown)]:-top-[3px]',\n        'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',\n        'group-has-[input:not(:placeholder-shown)]:font-medium',\n        // If has left slot\n        'group-has-[div[data-slot=select-left-slot]]:left-large-4x',\n        'group-has-[div[data-slot=select-left-slot]]:group-data-[state=open]:left-small',\n        'group-has-[div[data-slot=select-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',\n        // If has right slot\n        'group-has-[div[data-slot=select-right-slot]]:right-large-4x',\n        'group-has-[div[data-slot=select-right-slot]]:group-data-[state=open]:right-small',\n        'group-has-[div[data-slot=select-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',\n        // Animate\n        'group-data-[state=open]:animate-in',\n        'group-data-[state=closed]:animate-out',\n        'group-has-[input:not(:placeholder-shown)]:animate-out',\n        'group-disabled:hidden',\n        className\n      )}\n      data-has-error={hasError}\n      {...props}\n    >\n      <label htmlFor={htmlFor}>\n        <span className=\"bg-layer-2-idle rounded-small-1x max-w-full\">\n          {children}\n        </span>\n      </label>\n    </Typography>\n  )\n}\n\nexport function SelectOptions(props: ComponentProps<typeof ListContent>) {\n  return <ListContent {...props} />\n}\n\nexport function SelectOption({\n  className,\n  ...props\n}: ComponentProps<typeof ListItem>) {\n  return (\n    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />\n  )\n}\n\nexport function SelectOptionText(props: ComponentProps<typeof Typography>) {\n  return <Typography {...props} />\n}\n\nexport function SelectHeader(props: ComponentProps<typeof ListHeader>) {\n  return <ListHeader {...props} />\n}\n\nexport function SelectHeaderTitle(\n  props: ComponentProps<typeof ListHeaderTitle>\n) {\n  return <ListHeaderTitle {...props} />\n}\n\nexport function SelectLeftSlot({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'\n      )}\n      data-slot=\"select-left-slot\"\n    />\n  )\n}\n\nexport function SelectRightSlot({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twMerge(\n        className,\n        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center',\n        'group-disabled:hidden'\n      )}\n      data-slot=\"select-right-slot\"\n    />\n  )\n}\n\nexport function SelectSearch(props: ComponentProps<typeof SearchInputText>) {\n  return (\n    <SearchInputRoot variant=\"line\">\n      <SearchInputContent>\n        <SearchInputSlot>\n          <Icon className=\"text-icon-neutral-3\" name=\"search\" />\n        </SearchInputSlot>\n        <SearchInputText {...props} />\n      </SearchInputContent>\n    </SearchInputRoot>\n  )\n}\n\nexport function SelectCaption({\n  className,\n  variant = 'body',\n  size = 'sm',\n  weight = 'normal',\n  ...props\n}: ComponentProps<typeof Typography>) {\n  const { hasError } = useSelect()\n\n  const caption = tv({\n    base: 'text-size-body-sm mt-small-1x font-normal',\n    variants: {\n      state: {\n        error: 'text-danger-label-active',\n        idle: 'text-neutral-dark'\n      }\n    }\n  })\n\n  return (\n    <Typography\n      className={caption({\n        state: hasError ? 'error' : 'idle',\n        className\n      })}\n      size={size}\n      variant={variant}\n      weight={weight}\n      {...props}\n    />\n  )\n}\n"]}