@xjur-ui/react 1.0.6 → 2.0.0

package/dist/components/date-picker.js

@@ -1,232 +1,2 @@
-// src/components/date-picker.tsx
-import * as RadixPopover from "@radix-ui/react-popover";
-import { cx } 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/date-picker.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function DatePickerRoot(props) {
-  return /* @__PURE__ */ jsx2(RadixPopover.Root, { ...props });
-}
-function DatePickerTrigger({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    RadixPopover.Trigger,
-    {
-      className: cx(
-        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 DatePickerContent({
-  className,
-  sideOffset = 5,
-  side = "bottom",
-  align = "start",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(RadixPopover.Portal, { children: /* @__PURE__ */ jsx2(
-    RadixPopover.Content,
-    {
-      align,
-      className: cx(
-        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
-    }
-  ) });
-}
-function DatePickerValue({
-  className,
-  displayValue = "",
-  value,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!displayValue && /* @__PURE__ */ jsx2(Typography, { className: "text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x", children: displayValue }),
-    /* @__PURE__ */ jsx2(
-      "input",
-      {
-        ...props,
-        "aria-readonly": true,
-        className: cx("pointer-events-none", className),
-        hidden: true,
-        placeholder: props.placeholder ?? " ",
-        readOnly: true,
-        value: value ?? ""
-      }
-    )
-  ] });
-}
-function DatePickerLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    Typography,
-    {
-      asChild: true,
-      className: cx(
-        "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=date-picker-left-slot]]:left-large-4x",
-        "group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small",
-        "group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small",
-        // If has right slot
-        "group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x",
-        "group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small",
-        "group-has-[div[data-slot=date-picker-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__ */ jsx2("label", { htmlFor, children: /* @__PURE__ */ jsx2("span", { className: "bg-layer-2-idle rounded-small-1x max-w-full", children }) })
-    }
-  );
-}
-function DatePickerLeftSlot({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "date-picker-left-slot"
-    }
-  );
-}
-function DatePickerRightSlot({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ...props,
-      className: cx(
-        className,
-        "right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
-      ),
-      "data-slot": "date-picker-right-slot"
-    }
-  );
-}
-export {
-  DatePickerContent,
-  DatePickerLabel,
-  DatePickerLeftSlot,
-  DatePickerRightSlot,
-  DatePickerRoot,
-  DatePickerTrigger,
-  DatePickerValue
-};
+import {a}from'../chunk-EIG6CBTQ.js';import {createContext,useContext}from'react';import*as l from'@radix-ui/react-popover';import {tv,twMerge,twJoin}from'@xjur-ui/util';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var g=createContext({disabled:false,variant:"filled",hasError:false});function u(){let e=useContext(g);if(!e)throw new Error("useDatePicker must be used within a DatePickerRoot");return e}function w({disabled:e=false,variant:t="filled",hasError:a=false,...o}){return jsx(g.Provider,{value:{disabled:e,variant:t,hasError:a},children:jsx(l.Root,{...o})})}function k({className:e,...t}){let{disabled:a,variant:o,hasError:i}=u(),s=tv({base:twMerge("border border-transparent group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full items-center cursor-pointer","data-[state=open]:border-primary-idle","has-[input:not(:placeholder-shown)]:text-primary-idle","has-[input:not(:placeholder-shown)]:border-primary-idle","focus-within:border-primary-idle focus-within:hover:border-primary-idle","hover:border-border-layer-1"),variants:{variant:{filled:"bg-layer-2-hover",outlined:"bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3",disabled:"hover:border-transparent border-none bg-layer-2-idle cursor-text select-text"},state:{idle:"",error:twMerge("focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle","data-[state=open]:border-danger-idle has-[input:not(:placeholder-shown)]:border-danger-idle")}},defaultVariants:{variant:"filled",state:"idle"}});return jsx(l.Trigger,{className:s({variant:a?"disabled":o,state:i?"error":"idle",className:e}),...t,disabled:a})}function C({className:e,sideOffset:t=5,side:a="bottom",align:o="start",...i}){return jsx(l.Portal,{children:jsx(l.Content,{align:o,className:twJoin(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:a,sideOffset:t,...i})})}function R({className:e,displayValue:t="",value:a$1,...o}){return jsxs(Fragment,{children:[!!t&&jsx(a,{className:"text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x",children:t}),jsx("input",{...o,"aria-readonly":true,className:twJoin("pointer-events-none",e),hidden:true,placeholder:o.placeholder??" ",readOnly:true,value:a$1??""})]})}function D({className:e,htmlFor:t,children:a$1,...o}){let{variant:i,disabled:s,hasError:p}=u();return jsx(a,{asChild:true,className:twJoin("group 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-[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-[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=date-picker-left-slot]]:left-large-4x","group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small","group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small","group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x","group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small","group-has-[div[data-slot=date-picker-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","data-[disabled=true]:hidden",e),"data-disabled":s,"data-error":p,"data-variant":i,weight:"medium",...o,children:jsx("label",{htmlFor:t,children:jsx("span",{className:twJoin("rounded-small-1x max-w-full","group-data-[variant=outlined]:bg-layer-2-idle","group-data-[variant=filled]:bg-layer-2-hover"),children:a$1})})})}function N({className:e,...t}){return jsx("div",{...t,className:twJoin(e,"left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"),"data-slot":"date-picker-left-slot"})}function T({className:e,...t}){return jsx("div",{...t,className:twJoin(e,"right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center"),"data-slot":"date-picker-right-slot"})}function E({className:e,variant:t="body",size:a$1="sm",weight:o="normal",...i}){let{hasError:s}=u(),p=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,{className:p({state:s?"error":"idle",className:e}),size:a$1,variant:t,weight:o,...i})}export{E as DatePickerCaption,C as DatePickerContent,D as DatePickerLabel,N as DatePickerLeftSlot,T as DatePickerRightSlot,w as DatePickerRoot,k as DatePickerTrigger,R as DatePickerValue};//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker.tsx"],"names":["DatePickerContext","createContext","useDatePicker","context","useContext","DatePickerRoot","disabled","variant","hasError","props","jsx","DatePickerTrigger","className","trigger","tv","twMerge","DatePickerContent","sideOffset","side","align","twJoin","DatePickerValue","displayValue","value","jsxs","Fragment","Typography","DatePickerLabel","htmlFor","children","DatePickerLeftSlot","DatePickerRightSlot","DatePickerCaption","size","weight","caption"],"mappings":"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","file":"date-picker.js","sourcesContent":["import { createContext, useContext } from 'react'\nimport type { ComponentProps } from 'react'\nimport * as RadixPopover from '@radix-ui/react-popover'\nimport { tv, twJoin, twMerge } from '@xjur-ui/util'\nimport { Typography, type TypographyProps } from './typography'\n\nconst DatePickerContext = createContext({\n  disabled: false,\n  variant: 'filled' as 'filled' | 'outlined',\n  hasError: false\n})\n\nfunction useDatePicker() {\n  const context = useContext(DatePickerContext)\n  if (!context) {\n    throw new Error('useDatePicker must be used within a DatePickerRoot')\n  }\n  return context\n}\n\nexport function DatePickerRoot({\n  disabled = false,\n  variant = 'filled',\n  hasError = false,\n  ...props\n}: ComponentProps<typeof RadixPopover.Root> & {\n  disabled?: boolean\n  variant?: 'filled' | 'outlined'\n  hasError?: boolean\n}) {\n  return (\n    <DatePickerContext.Provider value={{ disabled, variant, hasError }}>\n      <RadixPopover.Root {...props} />\n    </DatePickerContext.Provider>\n  )\n}\n\nexport function DatePickerTrigger({\n  className,\n  ...props\n}: ComponentProps<typeof RadixPopover.Trigger>) {\n  const { disabled, variant, hasError } = useDatePicker()\n\n  const trigger = tv({\n    base: twMerge(\n      'border border-transparent group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full items-center cursor-pointer',\n      'data-[state=open]:border-primary-idle',\n      'has-[input:not(:placeholder-shown)]:text-primary-idle',\n      'has-[input:not(:placeholder-shown)]:border-primary-idle',\n      'focus-within:border-primary-idle focus-within:hover:border-primary-idle',\n      'hover:border-border-layer-1'\n    ),\n    variants: {\n      variant: {\n        filled: 'bg-layer-2-hover',\n        outlined:\n          'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3',\n        disabled:\n          'hover:border-transparent border-none bg-layer-2-idle cursor-text select-text'\n      },\n      state: {\n        idle: '',\n        error: twMerge(\n          'focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle',\n          'data-[state=open]:border-danger-idle has-[input:not(:placeholder-shown)]:border-danger-idle'\n        )\n      }\n    },\n    defaultVariants: {\n      variant: 'filled',\n      state: 'idle'\n    }\n  })\n\n  return (\n    <RadixPopover.Trigger\n      className={trigger({\n        variant: disabled ? 'disabled' : variant,\n        state: hasError ? 'error' : 'idle',\n        className\n      })}\n      {...props}\n      disabled={disabled}\n    />\n  )\n}\n\nexport function DatePickerContent({\n  className,\n  sideOffset = 5,\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={twJoin(\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    </RadixPopover.Portal>\n  )\n}\n\nexport function DatePickerValue({\n  className,\n  displayValue = '',\n  value,\n  ...props\n}: ComponentProps<'input'> & { displayValue?: string }) {\n  return (\n    <>\n      {!!displayValue && (\n        <Typography className=\"text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x\">\n          {displayValue}\n        </Typography>\n      )}\n\n      <input\n        {...props}\n        aria-readonly={true}\n        className={twJoin('pointer-events-none', className)}\n        hidden={true}\n        placeholder={props.placeholder ?? ' '}\n        readOnly={true}\n        value={value ?? ''}\n      />\n    </>\n  )\n}\n\nexport function DatePickerLabel({\n  className,\n  htmlFor,\n  children,\n  ...props\n}: TypographyProps & { htmlFor?: string }) {\n  const { variant, disabled, hasError } = useDatePicker()\n\n  return (\n    <Typography\n      asChild={true}\n      className={twJoin(\n        'group 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-[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-[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=date-picker-left-slot]]:left-large-4x',\n        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',\n        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',\n        // If has right slot\n        'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',\n        'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',\n        'group-has-[div[data-slot=date-picker-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        'data-[disabled=true]:hidden',\n\n        className\n      )}\n      data-disabled={disabled}\n      data-error={hasError}\n      data-variant={variant}\n      weight=\"medium\"\n      {...props}\n    >\n      <label htmlFor={htmlFor}>\n        <span\n          className={twJoin(\n            'rounded-small-1x max-w-full',\n            'group-data-[variant=outlined]:bg-layer-2-idle',\n            'group-data-[variant=filled]:bg-layer-2-hover'\n          )}\n        >\n          {children}\n        </span>\n      </label>\n    </Typography>\n  )\n}\n\nexport function DatePickerLeftSlot({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twJoin(\n        className,\n        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'\n      )}\n      data-slot=\"date-picker-left-slot\"\n    />\n  )\n}\n\nexport function DatePickerRightSlot({\n  className,\n  ...props\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      {...props}\n      className={twJoin(\n        className,\n        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'\n      )}\n      data-slot=\"date-picker-right-slot\"\n    />\n  )\n}\n\nexport function DatePickerCaption({\n  className,\n  variant = 'body',\n  size = 'sm',\n  weight = 'normal',\n  ...props\n}: ComponentProps<typeof Typography>) {\n  const { hasError } = useDatePicker()\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"]}

package/dist/components/divider.js

@@ -1,29 +1,2 @@
-// src/components/divider.tsx
-import "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cx } from "@xjur-ui/util";
-import { jsx } from "react/jsx-runtime";
-function Divider({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SeparatorPrimitive.Root,
-    {
-      className: cx(
-        "bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
-        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      ...props
-    }
-  );
-}
-export {
-  Divider
-};
+export{a as Divider}from'../chunk-CBFC4QME.js';//# sourceMappingURL=divider.js.map
+//# sourceMappingURL=divider.js.map

package/dist/components/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"divider.js"}

package/dist/components/dropdown-menu.js

@@ -1,295 +1,2 @@
-// src/components/dropdown-menu.tsx
-import "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { cx as cx3 } 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/divider.tsx
-import "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cx as cx2 } from "@xjur-ui/util";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Divider({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(
-    SeparatorPrimitive.Root,
-    {
-      className: cx2(
-        "bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
-        "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      ...props
-    }
-  );
-}
-
-// src/components/dropdown-menu.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function DropdownMenuRoot({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  align = "start",
-  side = "bottom",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
-    DropdownMenuPrimitive.Content,
-    {
-      align,
-      className: cx3(
-        "group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]",
-        className
-      ),
-      "data-slot": "dropdown-menu-content",
-      side,
-      sideOffset,
-      ...props,
-      children: /* @__PURE__ */ jsx4(ListRoot, { children })
-    }
-  ) });
-}
-function DropdownMenuList({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(ListContent, { ...props });
-}
-function DropdownMenuHeader({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(ListHeader, { ...props });
-}
-function DropdownMenuHeaderTitle({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(ListHeaderTitle, { ...props });
-}
-function DropdownMenuItem({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(ListItem, { className: cx3(className, "cursor-pointer"), ...props });
-}
-function DropdownMenuItemText({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(Typography, { ...props });
-}
-function DropdownMenuItemDivider({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(Divider, { ...props });
-}
-export {
-  DropdownMenuContent,
-  DropdownMenuHeader,
-  DropdownMenuHeaderTitle,
-  DropdownMenuItem,
-  DropdownMenuItemDivider,
-  DropdownMenuItemText,
-  DropdownMenuList,
-  DropdownMenuPortal,
-  DropdownMenuRoot,
-  DropdownMenuTrigger
-};
+export{d as DropdownMenuContent,f as DropdownMenuHeader,g as DropdownMenuHeaderTitle,h as DropdownMenuItem,j as DropdownMenuItemDivider,i as DropdownMenuItemText,e as DropdownMenuList,b as DropdownMenuPortal,a as DropdownMenuRoot,c as DropdownMenuTrigger}from'../chunk-RWMV7APX.js';import'../chunk-CBFC4QME.js';import'../chunk-KIFR5VIE.js';import'../chunk-EIG6CBTQ.js';//# sourceMappingURL=dropdown-menu.js.map
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"dropdown-menu.js"}