@xjur-ui/react 1.0.0 → 1.0.2

package/dist/components/select.js

@@ -0,0 +1,550 @@
+// 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 focus-within:shadow-focus-primary",
+          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 data-[state=open]:shadow-focus-primary",
+        "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/sheet.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+
+declare function SheetRoot({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ children, ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, overlay, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    overlay?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SheetBody({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): react_jsx_runtime.JSX.Element;
+
+export { SheetBody, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetRoot, SheetTitle, SheetTrigger };