@xjur-ui/react 1.0.6 → 2.1.0

package/dist/components/select.js

@@ -1,550 +0,0 @@
-// 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
-};

package/dist/components/switch.js

@@ -1,36 +0,0 @@
-// src/components/switch.tsx
-import "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { cx } from "@xjur-ui/util";
-import { jsx } from "react/jsx-runtime";
-function Switch({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    SwitchPrimitive.Root,
-    {
-      className: cx(
-        "w-large-3x h-large rounded-circle inline-flex shrink-0 items-center border border-transparent",
-        "peer data-[state=checked]:bg-primary-idle data-[state=unchecked]:bg-alt-4",
-        "focus-visible:border-ring focus-visible:ring-ring/50 transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        "hover:shadow-focus-primary p-[2px]",
-        className
-      ),
-      "data-slot": "switch",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        SwitchPrimitive.Thumb,
-        {
-          className: cx(
-            "bg-layer-2-idle size-medium pointer-events-none rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-          ),
-          "data-slot": "switch-thumb"
-        }
-      )
-    }
-  );
-}
-export {
-  Switch
-};

package/dist/components/test.d.ts

@@ -1,5 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare function Test(): react_jsx_runtime.JSX.Element;
-
-export { Test };

package/dist/components/test.js

@@ -1,8 +0,0 @@
-// src/components/test.tsx
-import { jsx } from "react/jsx-runtime";
-function Test() {
-  return /* @__PURE__ */ jsx("div", { children: "Test" });
-}
-export {
-  Test
-};