@xjur-ui/react 1.0.0

package/dist/components/ui/input/text.js

@@ -0,0 +1,195 @@
+// src/components/ui/input/text.tsx
+import { InputMask } from "@react-input/mask";
+import { useCallback, useEffect, useRef } from "react";
+import { cx as cx3 } from "@xjur-ui/util";
+
+// src/components/ui/input/root.tsx
+import { createContext, use } from "react";
+import { cx as cx2 } from "@xjur-ui/util";
+
+// src/components/ui/input/message.tsx
+import { memo as memo2 } from "react";
+import { cx } from "@xjur-ui/util";
+
+// src/components/ui/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/ui/input/message.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var InputMessage = memo2(
+  ({
+    children,
+    className,
+    weight = "normal",
+    variant = "body",
+    size = "sm-1x",
+    ...props
+  }) => {
+    const { errorMessage } = useInput();
+    return /* @__PURE__ */ jsx2(
+      Typography,
+      {
+        className: cx(
+          "text-neutral-dark data-[error=true]:text-danger-idle",
+          className
+        ),
+        "data-error": !!errorMessage,
+        size,
+        variant,
+        weight,
+        ...props,
+        children
+      }
+    );
+  }
+);
+InputMessage.displayName = "InputMessage";
+
+// src/components/ui/input/root.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var InputRootContext = createContext({});
+function useInput() {
+  const context = use(InputRootContext);
+  if (!context) {
+    throw new Error(
+      "useInput must be called within <Input.Root> or <Select.Root>"
+    );
+  }
+  return context;
+}
+
+// src/components/ui/input/text.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function InputText({
+  className,
+  value,
+  mask,
+  ...props
+}) {
+  const { errorMessage } = useInput();
+  const inputRef = useRef(null);
+  const InputComponent = mask ? InputMask : "input";
+  const onCheckInputFilled = useCallback(
+    ({ shouldUnfill = false }) => {
+      if (inputRef.current) {
+        if (shouldUnfill) inputRef.current.dataset.filled = "false";
+        else {
+          const hasNotErrorAndHasValue = !errorMessage && !!inputRef.current.value;
+          inputRef.current.dataset.filled = String(hasNotErrorAndHasValue);
+        }
+      }
+    },
+    [errorMessage]
+  );
+  function setRef(ref) {
+    inputRef.current = ref;
+    if (typeof props.ref === "function") {
+      props.ref(ref);
+    }
+  }
+  useEffect(() => {
+    onCheckInputFilled({ shouldUnfill: false });
+  }, [onCheckInputFilled]);
+  return /* @__PURE__ */ jsx4(
+    InputComponent,
+    {
+      ...props,
+      ...mask && { ...mask },
+      className: cx3(
+        "h-full w-full bg-transparent",
+        "border-hidden outline-hidden",
+        "placeholder:text-placeholder-neutral font-normal",
+        "text-neutral-dark text-size-body-md overflow-hidden text-ellipsis",
+        className
+      ),
+      "data-filled": !!value && !errorMessage,
+      readOnly: props.readOnly !== void 0 && props.readOnly,
+      ref: setRef,
+      value,
+      onBlur: (event) => {
+        props.onBlur?.(event);
+        onCheckInputFilled({ shouldUnfill: false });
+      },
+      onFocus: (event) => {
+        props.onFocus?.(event);
+        onCheckInputFilled({ shouldUnfill: true });
+      }
+    }
+  );
+}
+export {
+  InputText
+};

package/dist/components/ui/logo.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LogoProps {
+    mode?: 'horizontal' | 'vertical' | 'icon';
+    variant?: 'colorful' | 'orange' | 'purple' | 'white' | 'gray';
+}
+declare const Logo: react.MemoExoticComponent<({ mode, variant }: LogoProps) => react_jsx_runtime.JSX.Element>;
+
+export { Logo, type LogoProps };

package/dist/components/ui/logo.js

@@ -0,0 +1,324 @@
+// src/components/ui/logo.tsx
+import { memo } from "react";
+
+// src/components/resources/logo/horizontal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function LogoHorizontalSolid({ color }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      fill: "none",
+      height: "26",
+      viewBox: "0 0 95 26",
+      width: "95",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M89.14 14.625c4.756-1.796 4.739-9.325-.024-11.12-.943-.407-1.952-.497-2.966-.498-3.344.002-6.687-.02-10.03.006v19.822h4.902c0-2.47.002-4.937-.004-7.406 0-.174.05-.221.22-.22q1.266.013 2.53 0c.168-.002.252.06.33.2 1.38 2.426 2.764 4.849 4.142 7.275.068.118.139.167.278.167 1.841-.017 3.68.02 5.52-.017zm-2.579-3.982c-.225.048-.459.068-.689.07-1.555.006-3.11.002-4.666.006-.135 0-.188-.032-.187-.178q.009-1.413 0-2.824c-.001-.157.06-.187.199-.186.843.004 4.203.007 5.04.032.713.022 1.356.523 1.538 1.137.253.858-.3 1.74-1.235 1.943M31.777 3.004 37.552 3c.148 0 .234.045.316.17l3.522 5.338 3.517-5.33c.085-.13.173-.179.329-.178l5.773.004-6.624 9.203c-.103.143-.096.231.003.37l7.378 10.28-5.919-.001c-.126 0-.19-.05-.254-.148l-4.2-6.408-4.17 6.378c-.084.13-.172.179-.328.178l-5.857-.004 7.34-10.253c.12-.167.109-.268-.007-.429zM62.469 3.008c.097 0 .176.08.176.177l.002 10.278c.003 1.018.184 2.003.671 2.912.782 1.455 2.111 2.006 3.593 1.862 1.715-.167 2.672-1.224 3.179-2.785.223-.688.27-1.4.27-2.118V3.131a.13.13 0 0 1 .13-.13h4.663a.13.13 0 0 1 .13.13l-.008 10.222c-.001 1.362-.152 2.7-.658 3.977-1.235 3.11-3.488 4.956-6.804 5.42-2.05.287-4.02-.017-5.826-1.077-2.034-1.193-3.267-3-3.895-5.25a9.4 9.4 0 0 1-.355-2.487l-.03-10.759c0-.097.08-.177.176-.177z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M49.388 17.806c.156.038.286.074.418.1 1.007.192 1.877-.428 2.01-1.451a9 9 0 0 0 .062-1.158l.003-12.146a.15.15 0 0 1 .151-.15l4.62.003c.074 0 .133.059.133.132l.001 12.168c-.003 1.002-.06 2.002-.387 2.963q-.946 2.777-3.602 4.006c-.102.047-.171.065-.253-.049z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m17.777 14.363 1.2-1.202c1.55 1.507 3.065 3.055 4.602 4.575 1.843 1.641 2.048 4.679.097 6.314-5.965 4.847-8.34-7.021-12.57-4.062-.899.72-1.69 1.553-2.48 2.385-1.048 1.08-1.954 2.45-3.557 2.656-3.952 1.004-6.748-4.05-3.903-6.918l3.407-3.328c.35-.26.81-.352 1.165-.018.417.392.277.926-.116 1.285l-3.397 3.48c-1.63 1.999.894 4.833 3.025 3.558 1.463-.762 2.435-2.146 3.59-3.281 3.38-3.854 5.97-1.74 8.775 1.338.49.484.948 1.002 1.444 1.481 2.533 2.454 5.9-1.151 3.424-3.583-1.553-1.575-3.15-3.109-4.705-4.68",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m3.574 9.428 1.14-1.143c.033.03 4.257 4.125 6.292 6.16.727.726 2.33.753 3.076-.013a904 904 0 0 1 8.545-8.636c2.063-2.027-.76-5.235-3.012-3.66-1.39 1.015-2.487 2.386-3.73 3.572-.278.28-.616.346-.939.187-.446-.21-.656-.841-.315-1.233 1.02-1.254 2.223-2.348 3.38-3.473 2.646-2.616 7.385-.512 7.067 3.199-.025 1.1-.461 2.04-1.235 2.803-2.895 2.857-5.81 5.695-8.7 8.555-.556.55-1.19.873-1.953.964-1.043.125-2.026-.05-2.917-.623-2.016-1.666-6.558-6.62-6.7-6.66z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m16.59 10.646-1.193 1.2C12.49 8.736 9.357 5.85 6.349 2.84c-.439-.434-.9-.835-1.504-1.019-2.141-.718-4.149 2.184-2.573 3.9A32 32 0 0 0 4.135 7.6L2.898 8.812c-.572-.53-1.108-1.146-1.677-1.686-3.32-3.144.723-9.057 5.037-6.503.39.226.764.51 1.085.83 3.11 3.03 6.105 6.21 9.247 9.192",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+function LogoHorizontalColorful() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      fill: "none",
+      height: "26",
+      viewBox: "0 0 95 26",
+      width: "95",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M89.14 14.625c4.756-1.796 4.739-9.325-.024-11.12-.943-.407-1.952-.497-2.966-.498-3.344.002-6.687-.02-10.03.006v19.822h4.902c0-2.47.002-4.937-.004-7.406 0-.174.05-.221.22-.22q1.266.013 2.53 0c.168-.002.252.06.33.2 1.38 2.426 2.764 4.849 4.142 7.275.068.118.139.167.278.167 1.841-.017 3.68.02 5.52-.017zm-2.579-3.982c-.225.048-.459.068-.689.07-1.555.006-3.11.002-4.666.006-.135 0-.188-.032-.187-.178q.009-1.413 0-2.824c-.001-.157.06-.187.199-.186.843.004 4.203.007 5.04.032.713.022 1.356.523 1.538 1.137.253.858-.3 1.74-1.235 1.943M31.777 3.004 37.552 3c.148 0 .234.045.316.17l3.522 5.338 3.517-5.33c.085-.13.173-.179.329-.178l5.773.004-6.624 9.203c-.103.143-.096.231.003.37l7.378 10.28-5.919-.001c-.126 0-.19-.05-.254-.148l-4.2-6.408-4.17 6.378c-.084.13-.172.179-.328.178l-5.857-.004 7.34-10.253c.12-.167.109-.268-.007-.429zM62.469 3.008c.097 0 .176.08.176.177l.002 10.278c.003 1.018.184 2.003.671 2.912.782 1.455 2.111 2.006 3.593 1.862 1.715-.167 2.672-1.224 3.179-2.785.223-.688.27-1.4.27-2.118V3.131a.13.13 0 0 1 .13-.13h4.663a.13.13 0 0 1 .13.13l-.008 10.222c-.001 1.362-.152 2.7-.658 3.977-1.235 3.11-3.488 4.956-6.804 5.42-2.05.287-4.02-.017-5.826-1.077-2.034-1.193-3.267-3-3.895-5.25a9.4 9.4 0 0 1-.355-2.487l-.03-10.759c0-.097.08-.177.176-.177z",
+            fill: "#504E50"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M49.388 17.806c.156.038.286.074.418.1 1.007.192 1.877-.428 2.01-1.451a9 9 0 0 0 .062-1.158l.003-12.146a.15.15 0 0 1 .151-.15l4.62.003c.074 0 .133.059.133.132l.001 12.168c-.003 1.002-.06 2.002-.387 2.963q-.946 2.777-3.602 4.006c-.102.047-.171.065-.253-.049z",
+            fill: "#504E50"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m17.777 14.363 1.2-1.202c1.55 1.507 3.065 3.055 4.602 4.575 1.843 1.641 2.048 4.679.097 6.314-5.965 4.847-8.34-7.021-12.57-4.062-.899.72-1.69 1.553-2.48 2.385-1.048 1.08-1.954 2.45-3.557 2.656-3.952 1.004-6.748-4.05-3.903-6.918l3.407-3.328c.35-.26.81-.352 1.165-.018.417.392.277.926-.116 1.285l-3.397 3.48c-1.63 1.999.894 4.833 3.025 3.558 1.463-.762 2.435-2.146 3.59-3.281 3.38-3.854 5.97-1.74 8.775 1.338.49.484.948 1.002 1.444 1.481 2.533 2.454 5.9-1.151 3.424-3.583-1.553-1.575-3.15-3.109-4.705-4.68",
+            fill: "#D68600"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m3.574 9.428 1.14-1.143c.033.03 4.257 4.125 6.292 6.16.727.726 2.33.753 3.076-.013a904 904 0 0 1 8.545-8.636c2.063-2.027-.76-5.235-3.012-3.66-1.39 1.015-2.487 2.386-3.73 3.572-.278.28-.616.346-.939.187-.446-.21-.656-.841-.315-1.233 1.02-1.254 2.223-2.348 3.38-3.473 2.646-2.616 7.385-.512 7.067 3.199-.025 1.1-.461 2.04-1.235 2.803-2.895 2.857-5.81 5.695-8.7 8.555-.556.55-1.19.873-1.953.964-1.043.125-2.026-.05-2.917-.623-2.016-1.666-6.558-6.62-6.7-6.66z",
+            fill: "#66127D"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "m16.59 10.646-1.193 1.2C12.49 8.736 9.357 5.85 6.349 2.84c-.439-.434-.9-.835-1.504-1.019-2.141-.718-4.149 2.184-2.573 3.9A32 32 0 0 0 4.135 7.6L2.898 8.812c-.572-.53-1.108-1.146-1.677-1.686-3.32-3.144.723-9.057 5.037-6.503.39.226.764.51 1.085.83 3.11 3.03 6.105 6.21 9.247 9.192",
+            fill: "#D68600"
+          }
+        )
+      ]
+    }
+  );
+}
+var Horizontal = {
+  Solid: LogoHorizontalSolid,
+  Colorful: LogoHorizontalColorful
+};
+
+// src/components/resources/logo/vertical.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function LogoVerticalSolid({ color }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      fill: "none",
+      height: "50",
+      viewBox: "0 0 63 50",
+      width: "63",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M58.102 41.769c4.755-1.796 4.738-9.325-.024-11.12-.943-.407-1.952-.497-2.966-.498-3.344.002-6.688-.02-10.03.006V49.98h4.901c0-2.47.002-4.937-.004-7.406 0-.174.051-.221.221-.22q1.265.014 2.53 0c.168-.002.251.06.33.2 1.379 2.426 2.763 4.85 4.142 7.275.067.118.138.167.277.167 1.842-.017 3.68.02 5.52-.017zm-2.58-3.982c-.224.048-.459.068-.688.07-1.556.006-3.111.002-4.667.006-.134 0-.188-.032-.187-.178q.01-1.412 0-2.824c0-.157.06-.187.2-.186.842.005 4.203.008 5.038.033.714.02 1.357.522 1.54 1.136.253.858-.301 1.74-1.235 1.943M.739 30.148l5.775-.003c.148 0 .234.044.315.169l3.523 5.338 3.516-5.33c.085-.13.173-.178.33-.178l5.772.004-6.623 9.204c-.103.142-.097.23.003.368L20.727 50H14.81c-.127 0-.19-.05-.255-.148l-4.199-6.408-4.17 6.378c-.084.13-.172.179-.329.178L0 49.996l7.34-10.253c.12-.167.108-.268-.008-.429zM31.43 30.153c.097 0 .176.079.176.176l.003 10.278c.002 1.018.183 2.004.67 2.912.782 1.455 2.111 2.006 3.593 1.862 1.715-.167 2.673-1.224 3.18-2.785.223-.688.27-1.4.27-2.118V30.275a.13.13 0 0 1 .13-.13h4.662a.13.13 0 0 1 .13.13l-.008 10.223c0 1.361-.151 2.7-.658 3.976-1.235 3.11-3.488 4.956-6.804 5.42-2.05.287-4.019-.017-5.826-1.077-2.034-1.193-3.267-3-3.894-5.25a9.4 9.4 0 0 1-.356-2.487l-.03-10.758c0-.098.08-.177.177-.177l4.586.007",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M18.35 44.95c.155.038.285.074.417.1 1.008.192 1.878-.428 2.01-1.451a9 9 0 0 0 .063-1.158l.003-12.146a.15.15 0 0 1 .15-.15l4.621.003c.073 0 .133.06.133.132v12.168c-.002 1.002-.06 2.003-.387 2.963-.631 1.85-1.83 3.188-3.602 4.006-.102.047-.17.066-.252-.049z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "m36.738 14.363 1.201-1.202c1.549 1.507 3.065 3.055 4.602 4.575 1.843 1.641 2.047 4.679.096 6.314-5.965 4.847-8.34-7.021-12.57-4.062-.898.72-1.69 1.553-2.48 2.385-1.047 1.08-1.954 2.45-3.557 2.656-3.952 1.004-6.748-4.05-3.903-6.918l3.407-3.328c.35-.26.81-.352 1.165-.018.418.392.277.926-.116 1.285l-3.397 3.48c-1.63 1.999.894 4.833 3.025 3.558 1.463-.762 2.435-2.146 3.59-3.281 3.38-3.854 5.97-1.74 8.775 1.338.49.484.949 1.002 1.444 1.481 2.533 2.454 5.9-1.151 3.424-3.583-1.553-1.575-3.15-3.109-4.705-4.68",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "m22.535 9.428 1.14-1.143c.033.03 4.257 4.125 6.292 6.16.727.726 2.33.753 3.077-.013a904 904 0 0 1 8.544-8.636c2.063-2.027-.76-5.235-3.012-3.66-1.39 1.015-2.487 2.386-3.73 3.572-.278.28-.616.346-.938.187-.447-.21-.657-.841-.316-1.233 1.02-1.254 2.223-2.348 3.38-3.473 2.646-2.616 7.386-.512 7.068 3.199-.026 1.1-.462 2.04-1.236 2.803-2.895 2.857-5.81 5.695-8.7 8.555-.556.55-1.19.873-1.953.964-1.043.125-2.026-.05-2.917-.623-2.016-1.666-6.558-6.62-6.699-6.66",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "m35.55 10.646-1.192 1.2c-2.907-3.11-6.04-5.997-9.047-9.007-.44-.434-.901-.835-1.505-1.019-2.141-.718-4.149 2.184-2.573 3.9a32 32 0 0 0 1.863 1.88l-1.237 1.213c-.572-.53-1.108-1.146-1.676-1.686-3.32-3.144.722-9.057 5.036-6.503.39.226.764.51 1.085.83 3.11 3.03 6.105 6.21 9.247 9.192",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+function LogoVerticalColorful() {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      fill: "none",
+      height: "50",
+      viewBox: "0 0 63 50",
+      width: "63",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M58.102 41.769c4.755-1.796 4.738-9.325-.024-11.12-.943-.407-1.952-.497-2.966-.498-3.344.002-6.688-.02-10.03.006V49.98h4.901c0-2.47.002-4.937-.004-7.406 0-.174.051-.221.221-.22q1.265.014 2.53 0c.168-.002.251.06.33.2 1.379 2.426 2.763 4.85 4.142 7.275.067.118.138.167.277.167 1.842-.017 3.68.02 5.52-.017zm-2.58-3.982c-.224.048-.459.068-.688.07-1.556.006-3.111.002-4.667.006-.134 0-.188-.032-.187-.178q.01-1.412 0-2.824c0-.157.06-.187.2-.186.842.005 4.203.008 5.038.033.714.02 1.357.522 1.54 1.136.253.858-.301 1.74-1.235 1.943M.739 30.148l5.775-.003c.148 0 .234.044.315.169l3.523 5.338 3.516-5.33c.085-.13.173-.178.33-.178l5.772.004-6.623 9.204c-.103.142-.097.23.003.368L20.727 50H14.81c-.127 0-.19-.05-.255-.148l-4.199-6.408-4.17 6.378c-.084.13-.172.179-.329.178L0 49.996l7.34-10.253c.12-.167.108-.268-.008-.429zM31.43 30.153c.097 0 .176.079.176.176l.003 10.278c.002 1.018.183 2.004.67 2.912.782 1.455 2.111 2.006 3.593 1.862 1.715-.167 2.673-1.224 3.18-2.785.223-.688.27-1.4.27-2.118V30.275a.13.13 0 0 1 .13-.13h4.662a.13.13 0 0 1 .13.13l-.008 10.223c0 1.361-.151 2.7-.658 3.976-1.235 3.11-3.488 4.956-6.804 5.42-2.05.287-4.019-.017-5.826-1.077-2.034-1.193-3.267-3-3.894-5.25a9.4 9.4 0 0 1-.356-2.487l-.03-10.758c0-.098.08-.177.177-.177l4.586.007",
+            fill: "#504E50"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M18.35 44.95c.155.038.285.074.417.1 1.008.192 1.878-.428 2.01-1.451a9 9 0 0 0 .063-1.158l.003-12.146a.15.15 0 0 1 .15-.15l4.621.003c.073 0 .133.06.133.132v12.168c-.002 1.002-.06 2.003-.387 2.963-.631 1.85-1.83 3.188-3.602 4.006-.102.047-.17.066-.252-.049z",
+            fill: "#504E50"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "m36.738 14.363 1.201-1.202c1.549 1.507 3.065 3.055 4.602 4.575 1.843 1.641 2.047 4.679.096 6.314-5.965 4.847-8.34-7.021-12.57-4.062-.898.72-1.69 1.553-2.48 2.385-1.047 1.08-1.954 2.45-3.557 2.656-3.952 1.004-6.748-4.05-3.903-6.918l3.407-3.328c.35-.26.81-.352 1.165-.018.418.392.277.926-.116 1.285l-3.397 3.48c-1.63 1.999.894 4.833 3.025 3.558 1.463-.762 2.435-2.146 3.59-3.281 3.38-3.854 5.97-1.74 8.775 1.338.49.484.949 1.002 1.444 1.481 2.533 2.454 5.9-1.151 3.424-3.583-1.553-1.575-3.15-3.109-4.705-4.68",
+            fill: "#D68600"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "m22.535 9.428 1.14-1.143c.033.03 4.257 4.125 6.292 6.16.727.726 2.33.753 3.077-.013a904 904 0 0 1 8.544-8.636c2.063-2.027-.76-5.235-3.012-3.66-1.39 1.015-2.487 2.386-3.73 3.572-.278.28-.616.346-.938.187-.447-.21-.657-.841-.316-1.233 1.02-1.254 2.223-2.348 3.38-3.473 2.646-2.616 7.386-.512 7.068 3.199-.026 1.1-.462 2.04-1.236 2.803-2.895 2.857-5.81 5.695-8.7 8.555-.556.55-1.19.873-1.953.964-1.043.125-2.026-.05-2.917-.623-2.016-1.666-6.558-6.62-6.699-6.66",
+            fill: "#66127D"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "m35.55 10.646-1.192 1.2c-2.907-3.11-6.04-5.997-9.047-9.007-.44-.434-.901-.835-1.505-1.019-2.141-.718-4.149 2.184-2.573 3.9a32 32 0 0 0 1.863 1.88l-1.237 1.213c-.572-.53-1.108-1.146-1.676-1.686-3.32-3.144.722-9.057 5.036-6.503.39.226.764.51 1.085.83 3.11 3.03 6.105 6.21 9.247 9.192",
+            fill: "#D68600"
+          }
+        )
+      ]
+    }
+  );
+}
+var Vertical = {
+  Solid: LogoVerticalSolid,
+  Colorful: LogoVerticalColorful
+};
+
+// src/components/resources/logo/icon.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function LogoIconSolid({ color }) {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      fill: "none",
+      height: "26",
+      viewBox: "0 0 26 26",
+      width: "26",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M17.7771 14.3626C18.1813 13.9583 18.5751 13.5644 18.9779 13.1612C20.5269 14.6679 22.0424 16.2157 23.5793 17.7363C25.4224 19.377 25.6267 22.4146 23.6763 24.05C17.7108 28.8974 15.3367 17.0285 11.1052 19.9875C10.2073 20.7081 9.41678 21.5407 8.62623 22.3732C7.57834 23.4534 6.67195 24.8221 5.06874 25.0287C1.11705 26.0331 -1.6791 20.9798 1.16588 18.1112L4.57331 14.783C4.92332 14.5238 5.3824 14.4309 5.73811 14.7651C6.15548 15.1572 6.01505 15.6913 5.62227 16.0498L2.22482 19.5303C0.594533 21.5289 3.1191 24.3635 5.24981 23.0884C6.71294 22.3263 7.68491 20.9423 8.83937 19.8066C12.2197 15.9533 14.8099 18.0669 17.6149 21.1446C18.1057 21.629 18.5634 22.1473 19.0588 22.6262C21.5923 25.0802 24.9591 21.4749 22.483 19.0431C20.9304 17.4682 19.3333 15.934 17.7778 14.3623L17.7771 14.3626Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M3.57427 9.4276C3.95493 9.0462 4.32775 8.6723 4.71412 8.28518C4.74727 8.31556 8.97055 12.4102 11.0061 14.4445C11.7332 15.1712 13.3361 15.1983 14.0824 14.4316C16.9146 11.5384 19.7567 8.64943 22.6266 5.79551C24.6903 3.76946 21.8667 0.560949 19.6148 2.13589C18.2244 3.15071 17.1277 4.52226 15.8856 5.70793C15.6072 5.98889 15.2689 6.05359 14.9464 5.89524C14.5001 5.68506 14.2898 5.05379 14.6306 4.66238C15.6517 3.40772 16.8543 2.31355 18.0116 1.18864C20.6567 -1.42721 25.3964 0.676765 25.0785 4.3875C25.0528 5.48881 24.6169 6.42749 23.8428 7.19137C20.9475 10.0478 18.0337 12.8856 15.1428 15.7463C14.5868 16.2964 13.9523 16.6185 13.1896 16.71C12.1474 16.8351 11.1644 16.6596 10.2729 16.0873C8.25735 14.4205 3.7147 9.46657 3.57391 9.4276H3.57427Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M16.5895 10.6458C16.1661 11.0719 15.7865 11.454 15.3969 11.8461C12.4899 8.73665 9.35726 5.84949 6.34938 2.83865C5.91027 2.4047 5.44869 2.00399 4.84491 1.82026C2.70386 1.10178 0.696116 4.00359 2.27223 5.71973C2.86461 6.36815 3.49049 7.00228 4.13491 7.59923C3.71397 8.01244 3.31335 8.40564 2.89776 8.8135C2.32569 8.28304 1.78999 7.66679 1.22149 7.12667C-2.09897 3.98286 1.94361 -1.93015 6.25778 0.623506C6.64878 0.850132 7.0216 1.13431 7.3431 1.45316C10.4529 4.4833 13.4476 7.66321 16.5895 10.6458Z",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+function LogoIconColorful() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      fill: "none",
+      height: "26",
+      viewBox: "0 0 26 26",
+      width: "26",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M17.7771 14.3626C18.1813 13.9583 18.5751 13.5644 18.9779 13.1612C20.5269 14.6679 22.0424 16.2157 23.5793 17.7363C25.4224 19.377 25.6267 22.4146 23.6763 24.05C17.7108 28.8974 15.3367 17.0285 11.1052 19.9875C10.2073 20.7081 9.41678 21.5407 8.62623 22.3732C7.57834 23.4534 6.67195 24.8221 5.06874 25.0287C1.11705 26.0331 -1.6791 20.9798 1.16588 18.1112L4.57331 14.783C4.92332 14.5238 5.3824 14.4309 5.73811 14.7651C6.15548 15.1572 6.01505 15.6913 5.62227 16.0498L2.22482 19.5303C0.594533 21.5289 3.1191 24.3635 5.24981 23.0884C6.71294 22.3263 7.68491 20.9423 8.83937 19.8066C12.2197 15.9533 14.8099 18.0669 17.6149 21.1446C18.1057 21.629 18.5634 22.1473 19.0588 22.6262C21.5923 25.0802 24.9591 21.4749 22.483 19.0431C20.9304 17.4682 19.3333 15.934 17.7778 14.3623L17.7771 14.3626Z",
+            fill: "#D68600"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M3.57427 9.4276C3.95493 9.0462 4.32775 8.6723 4.71412 8.28518C4.74727 8.31556 8.97055 12.4102 11.0061 14.4445C11.7332 15.1712 13.3361 15.1983 14.0824 14.4316C16.9146 11.5384 19.7567 8.64943 22.6266 5.79551C24.6903 3.76946 21.8667 0.560949 19.6148 2.13589C18.2244 3.15071 17.1277 4.52226 15.8856 5.70793C15.6072 5.98889 15.2689 6.05359 14.9464 5.89524C14.5001 5.68506 14.2898 5.05379 14.6306 4.66238C15.6517 3.40772 16.8543 2.31355 18.0116 1.18864C20.6567 -1.42721 25.3964 0.676765 25.0785 4.3875C25.0528 5.48881 24.6169 6.42749 23.8428 7.19137C20.9475 10.0478 18.0337 12.8856 15.1428 15.7463C14.5868 16.2964 13.9523 16.6185 13.1896 16.71C12.1474 16.8351 11.1644 16.6596 10.2729 16.0873C8.25735 14.4205 3.7147 9.46657 3.57391 9.4276H3.57427Z",
+            fill: "#66127D"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M16.5895 10.6458C16.1661 11.0719 15.7865 11.454 15.3969 11.8461C12.4899 8.73665 9.35726 5.84949 6.34938 2.83865C5.91027 2.4047 5.44869 2.00399 4.84491 1.82026C2.70386 1.10178 0.696116 4.00359 2.27223 5.71973C2.86461 6.36815 3.49049 7.00228 4.13491 7.59923C3.71397 8.01244 3.31335 8.40564 2.89776 8.8135C2.32569 8.28304 1.78999 7.66679 1.22149 7.12667C-2.09897 3.98286 1.94361 -1.93015 6.25778 0.623506C6.64878 0.850132 7.0216 1.13431 7.3431 1.45316C10.4529 4.4833 13.4476 7.66321 16.5895 10.6458Z",
+            fill: "#D68600"
+          }
+        )
+      ]
+    }
+  );
+}
+var Icon = {
+  Solid: LogoIconSolid,
+  Colorful: LogoIconColorful
+};
+
+// src/components/ui/logo.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Logo = memo(
+  ({ mode = "horizontal", variant = "colorful" }) => {
+    const colorToHex = {
+      orange: "#D68600",
+      purple: "#66127D",
+      white: "#FFFFFF",
+      gray: "#6B7280"
+    };
+    switch (mode) {
+      case "icon":
+        if (variant === "colorful") {
+          return /* @__PURE__ */ jsx4(Icon.Colorful, {});
+        }
+        return /* @__PURE__ */ jsx4(Icon.Solid, { color: colorToHex[variant] });
+      case "vertical":
+        if (variant === "colorful") {
+          return /* @__PURE__ */ jsx4(Vertical.Colorful, {});
+        }
+        return /* @__PURE__ */ jsx4(Vertical.Solid, { color: colorToHex[variant] });
+      case "horizontal":
+      default:
+        if (variant === "colorful") {
+          return /* @__PURE__ */ jsx4(Horizontal.Colorful, {});
+        }
+        return /* @__PURE__ */ jsx4(Horizontal.Solid, { color: colorToHex[variant] });
+    }
+  }
+);
+Logo.displayName = "Logo";
+export {
+  Logo
+};

package/dist/components/ui/otp-input.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as OTPPasswordField from '@radix-ui/react-one-time-password-field';
+
+declare function Root({ children, className, ...props }: OTPPasswordField.OneTimePasswordFieldProps): react_jsx_runtime.JSX.Element;
+declare function Input({ className, ...props }: OTPPasswordField.OneTimePasswordFieldInputProps): react_jsx_runtime.JSX.Element;
+declare function HiddenInput({ ...props }: OTPPasswordField.OneTimePasswordFieldHiddenInputProps): react_jsx_runtime.JSX.Element;
+declare const OTPInput: {
+    Root: typeof Root;
+    Input: typeof Input;
+    HiddenInput: typeof HiddenInput;
+};
+
+export { OTPInput };

package/dist/components/ui/otp-input.js

@@ -0,0 +1,47 @@
+// src/components/ui/otp-input.tsx
+import * as OTPPasswordField from "@radix-ui/react-one-time-password-field";
+import { cx } from "@xjur-ui/util";
+import { jsx } from "react/jsx-runtime";
+function Root2({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    OTPPasswordField.Root,
+    {
+      className: cx(className, "group gap-small flex items-center"),
+      ...props,
+      children
+    }
+  );
+}
+function Input2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    OTPPasswordField.Input,
+    {
+      className: cx(
+        className,
+        "text-neutral-dark h-large-6x bg-layer-2-hover rounded-small-1x w-full text-center outline-0",
+        "focus-within:border-primary-idle focus-within:shadow-focus-primary focus-within:border"
+      ),
+      ...props
+    }
+  );
+}
+function HiddenInput2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(OTPPasswordField.HiddenInput, { ...props });
+}
+var OTPInput = {
+  Root: Root2,
+  Input: Input2,
+  HiddenInput: HiddenInput2
+};
+export {
+  OTPInput
+};

package/dist/components/ui/typography.d.ts

@@ -0,0 +1,17 @@
+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';
+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;
+} & 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>;
+
+export { Typography, type TypographyProps };