@xjur-ui/react 1.0.0 → 1.0.2

package/dist/components/sheet.js

@@ -0,0 +1,251 @@
+// src/components/sheet.tsx
+import "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cx as cx3 } from "@xjur-ui/util";
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva, cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  [
+    "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"
+    }
+  }
+);
+function Button({
+  asChild,
+  className,
+  variant = "primary",
+  size = "md",
+  appearance = "solid",
+  ...props
+}) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cx(buttonVariants({ variant, appearance, size }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/icon.tsx
+import { cx as cx2 } from "@xjur-ui/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      ...props,
+      className: cx2(
+        "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/sheet.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function SheetRoot({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({
+  children = /* @__PURE__ */ jsx3(Button, { appearance: "ghost", size: "icon_md", variant: "tertiary", children: /* @__PURE__ */ jsx3(Icon, { className: "text-icon-neutral-3", name: "close" }) }),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props, children });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    SheetPrimitive.Overlay,
+    {
+      className: cx3(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      "data-slot": "sheet-overlay",
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  overlay = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    overlay && /* @__PURE__ */ jsx3(SheetOverlay, {}),
+    /* @__PURE__ */ jsx3(
+      SheetPrimitive.Content,
+      {
+        className: cx3(
+          "border-border-layer-2 bg-layer-2-idle data-[state=open]:animate-in data-[state=closed]:animate-out shadow-elevation-2 fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        ),
+        "data-slot": "sheet-content",
+        ...props,
+        children
+      }
+    )
+  ] });
+}
+function SheetBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: cx3("px-large-2x", className), ...props });
+}
+function SheetHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cx3(
+        "py-large px-large-2x border-b-border-layer-2 border-b",
+        className
+      ),
+      "data-slot": "sheet-header",
+      ...props
+    }
+  );
+}
+function SheetFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cx3(
+        "py-large px-large-2x border-t-border-layer-2 mt-auto border-t",
+        className
+      ),
+      "data-slot": "sheet-footer",
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    SheetPrimitive.Title,
+    {
+      className: cx3("text-size-title-lg font-medium", className),
+      "data-slot": "sheet-title",
+      ...props
+    }
+  );
+}
+export {
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetRoot,
+  SheetTitle,
+  SheetTrigger
+};

package/dist/components/switch.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,36 @@
+// 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/tabs.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+declare function TabsRoot({ ...props }: React.ComponentProps<typeof TabsPrimitive.Tabs>): react_jsx_runtime.JSX.Element;
+declare function TabsList({ ...props }: React.ComponentProps<typeof TabsPrimitive.TabsList>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ variant, className, ...props }: React.ComponentProps<typeof TabsPrimitive.TabsTrigger> & {
+    variant?: 'line' | 'button';
+}): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ ...props }: React.ComponentProps<typeof TabsPrimitive.TabsContent>): react_jsx_runtime.JSX.Element;
+
+export { TabsContent, TabsList, TabsRoot, TabsTrigger };

package/dist/components/tabs.js

@@ -0,0 +1,54 @@
+// src/components/tabs.tsx
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function TabsRoot({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Tabs, { ...props });
+}
+function TabsList2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.TabsList, { ...props });
+}
+function TabsTrigger2({
+  variant,
+  className,
+  ...props
+}) {
+  const variants = cva(
+    [
+      "rounded-small-1x h-large-4x cursor-pointer text-size-label-md text-neutral-dark"
+    ],
+    {
+      variants: {
+        variant: {
+          line: "py-small_1x-alt px-small data-[state=active]:border-b-[3px] data-[state=active]:border-b-primary-active data-[state=active]:rounded-none hover:bg-layer-2-hover",
+          button: "rounded-br-none rounded-bl-none py-small_1x-alt px-large bg-primary-idle text-neutral-label hover:bg-primary-hover data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-label-active"
+        }
+      },
+      defaultVariants: {
+        variant: "button"
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.TabsTrigger,
+    {
+      className: cx(className, variants({ variant })),
+      ...props
+    }
+  );
+}
+function TabsContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.TabsContent, { ...props });
+}
+export {
+  TabsContent2 as TabsContent,
+  TabsList2 as TabsList,
+  TabsRoot,
+  TabsTrigger2 as TabsTrigger
+};

package/dist/components/tag.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ClassVariantProps } from '@xjur-ui/util';
+import { ComponentProps } from 'react';
+import { Typography } from './typography.js';
+import { Icon, IconType } from './icon.js';
+
+declare const tagVariants: (props?: ({
+    variant?: "primary" | "neutral" | "danger" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TagRoot({ className, variant, ...props }: ComponentProps<'div'> & ClassVariantProps<typeof tagVariants>): react_jsx_runtime.JSX.Element;
+declare function TagText({ variant, size, weight, className, ...props }: ComponentProps<typeof Typography>): react_jsx_runtime.JSX.Element;
+declare function TagIcon({ className, ...props }: ComponentProps<typeof Icon>): react_jsx_runtime.JSX.Element;
+declare function TagClose({ className, children, ...props }: ComponentProps<'button'> & {
+    name?: IconType;
+}): react_jsx_runtime.JSX.Element;
+
+export { TagClose, TagIcon, TagRoot, TagText };

package/dist/components/tag.js

@@ -0,0 +1,189 @@
+// src/components/tag.tsx
+import { cva as cva2, cx as cx2 } from "@xjur-ui/util";
+import "react";
+
+// 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/icon.tsx
+import { cx } from "@xjur-ui/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Icon({ className, filled = false, name, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      ...props,
+      className: cx(
+        "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/tag.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var tagVariants = cva2(
+  [
+    "group/tag relative h-large-2x w-fit rounded-small-1x px-small py-none flex items-center gap-small_1x-alt",
+    "transition-all duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover",
+        danger: "bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover",
+        neutral: "bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+function TagRoot({
+  className,
+  variant = "primary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3("div", { className: cx2(tagVariants({ variant }), className), ...props });
+}
+function TagText({
+  variant = "label",
+  size = "sm-1x",
+  weight = "medium",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    Typography,
+    {
+      className: cx2(className, "truncate"),
+      size,
+      variant,
+      weight,
+      ...props
+    }
+  );
+}
+function TagIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    Icon,
+    {
+      className: (cx2(
+        "text-size-body-md",
+        "group-data-[variant=primary]:text-primary-label-idle",
+        "group-data-[variant=danger]:text-danger-label-idle",
+        "group-data-[variant=neutral]:text-icon-neutral-3"
+      ), className),
+      ...props
+    }
+  );
+}
+function TagClose({
+  className,
+  children = /* @__PURE__ */ jsx3(TagIcon, { name: "close" }),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      className: cx2(
+        className,
+        "cursor-pointer bg-inherit",
+        "invisible items-center justify-center group-hover/tag:visible",
+        "absolute top-0 right-0",
+        "h-large-2x w-large-2x rounded-circle",
+        "transition-[visibility] duration-200"
+      ),
+      type: "button",
+      ...props,
+      children
+    }
+  );
+}
+export {
+  TagClose,
+  TagIcon,
+  TagRoot,
+  TagText
+};

package/dist/components/{ui/typography.d.ts → typography.d.ts}

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import { ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -6,12 +6,12 @@ import { ClassVariantProps } from '@xjur-ui/util';
 
 declare const typographyVariants: (props?: ({
     variant?: "body" | "label" | "title" | "headline" | null | undefined;
-    size?: "md" | "sm" | "sm-2x" | "sm-1x" | "lg" | null | undefined;
-    weight?: "bold" | "normal" | "black" | "medium" | "thin" | "light" | "extraLight" | "semibold" | "extraBold" | null | undefined;
+    size?: "sm" | "md" | "lg" | "sm-2x" | "sm-1x" | null | undefined;
+    weight?: "bold" | "thin" | "extraLight" | "light" | "normal" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends ComponentProps<'base'>, ClassVariantProps<typeof typographyVariants> {
     asChild?: boolean;
 }
-declare const Typography: react.MemoExoticComponent<({ variant, size, weight, asChild, className, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element>;
+declare const Typography: React.MemoExoticComponent<({ variant, size, weight, asChild, className, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element>;
 
 export { Typography, type TypographyProps };

package/dist/components/{ui/typography.js → typography.js}

@@ -1,4 +1,4 @@
-// src/components/ui/typography.tsx
+// src/components/typography.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "@xjur-ui/util";
 import { memo } from "react";