@xjur-ui/react 1.0.0

package/dist/components/ui/input/content.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type InputContentProps = ComponentProps<'div'> & {
+    children: ComponentProps<'div'>['children'];
+};
+declare function InputContent({ className, children, ...props }: InputContentProps): react_jsx_runtime.JSX.Element;
+
+export { InputContent, type InputContentProps };

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

@@ -0,0 +1,183 @@
+// src/components/ui/input/content.tsx
+import { cx as cx3, cva as cva2 } 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/content.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var variants = cva2(
+  [
+    "flex items-center gap-small py-small_1x-alt px-small",
+    "border-1 border-border-layer-2",
+    "bg-layer-2-idle",
+    "group-hover:border-border-layer-3",
+    "transition-[border-color] duration-100 ease",
+    "data-[disabled=true]:pointer-events-none",
+    "has-[input[data-filled=true]]:bg-layer-2-hover"
+  ],
+  {
+    variants: {
+      isError: {
+        true: "border-1 border-danger-idle focus-within:border-danger-idle focus-within:shadow-focus-danger group-hover:border-danger-idle",
+        false: "focus-within:border-primary-idle focus-within:shadow-focus-primary"
+      },
+      rounded: {
+        true: "rounded-circle",
+        false: "rounded-small-1x"
+      }
+    },
+    defaultVariants: {
+      rounded: false
+    }
+  }
+);
+function InputContent({
+  className,
+  children,
+  ...props
+}) {
+  const { errorMessage, rounded, disabled } = useInput();
+  const classNames = variants({
+    className,
+    isError: !!errorMessage,
+    rounded
+  });
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...props,
+      className: cx3("group", classNames),
+      "data-disabled": disabled,
+      children
+    }
+  );
+}
+export {
+  InputContent
+};

package/dist/components/ui/input/index.d.ts

@@ -0,0 +1,12 @@
+export { InputRoot, InputRootContext, InputRootProps, useInput } from './root.js';
+export { InputText, InputTextProps } from './text.js';
+export { InputContent, InputContentProps } from './content.js';
+export { InputSlot, InputSlotProps } from './slot.js';
+export { InputMessage, InputMessageProps } from './message.js';
+export { InputLabel, InputLabelProps } from './label.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@react-input/mask';
+import '../typography.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';

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

@@ -0,0 +1,335 @@
+// 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;
+}
+function InputRoot({
+  children,
+  className,
+  errorMessage,
+  size = "lg",
+  rounded = false,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    InputRootContext.Provider,
+    {
+      value: { errorMessage, disabled, size, rounded },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          className: cx2(
+            "group gap-small relative flex flex-col data-[disabled=true]:opacity-60",
+            className
+          ),
+          "data-disabled": disabled,
+          children: [
+            children,
+            errorMessage && /* @__PURE__ */ jsx3(InputMessage, { children: errorMessage })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// 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";
+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 });
+      }
+    }
+  );
+}
+
+// src/components/ui/input/content.tsx
+import { cx as cx4, cva as cva2 } from "@xjur-ui/util";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var variants = cva2(
+  [
+    "flex items-center gap-small py-small_1x-alt px-small",
+    "border-1 border-border-layer-2",
+    "bg-layer-2-idle",
+    "group-hover:border-border-layer-3",
+    "transition-[border-color] duration-100 ease",
+    "data-[disabled=true]:pointer-events-none",
+    "has-[input[data-filled=true]]:bg-layer-2-hover"
+  ],
+  {
+    variants: {
+      isError: {
+        true: "border-1 border-danger-idle focus-within:border-danger-idle focus-within:shadow-focus-danger group-hover:border-danger-idle",
+        false: "focus-within:border-primary-idle focus-within:shadow-focus-primary"
+      },
+      rounded: {
+        true: "rounded-circle",
+        false: "rounded-small-1x"
+      }
+    },
+    defaultVariants: {
+      rounded: false
+    }
+  }
+);
+function InputContent({
+  className,
+  children,
+  ...props
+}) {
+  const { errorMessage, rounded, disabled } = useInput();
+  const classNames = variants({
+    className,
+    isError: !!errorMessage,
+    rounded
+  });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ...props,
+      className: cx4("group", classNames),
+      "data-disabled": disabled,
+      children
+    }
+  );
+}
+
+// src/components/ui/input/slot.tsx
+import { memo as memo3 } from "react";
+import { cx as cx5 } from "@xjur-ui/util";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var InputSlot = memo3(
+  ({ children, className, ...props }) => {
+    return /* @__PURE__ */ jsx6(
+      "label",
+      {
+        ...props,
+        className: cx5("flex items-center justify-center", className),
+        children
+      }
+    );
+  }
+);
+InputSlot.displayName = "InputSlot";
+
+// src/components/ui/input/label.tsx
+import { memo as memo4 } from "react";
+import { cx as cx6 } from "@xjur-ui/util";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var InputLabel = memo4(
+  ({
+    children,
+    htmlFor,
+    variant = "label",
+    weight = "medium",
+    size = "sm",
+    className,
+    ...props
+  }) => {
+    const { errorMessage } = useInput();
+    return /* @__PURE__ */ jsx7(
+      Typography,
+      {
+        asChild: true,
+        className: cx6(
+          "text-title-neutral data-[error=true]:text-danger-label-active w-fit",
+          className
+        ),
+        "data-error": !!errorMessage,
+        size,
+        variant,
+        weight,
+        ...props,
+        children: /* @__PURE__ */ jsx7("label", { htmlFor, children })
+      }
+    );
+  }
+);
+InputLabel.displayName = "InputLabel";
+export {
+  InputContent,
+  InputLabel,
+  InputMessage,
+  InputRoot,
+  InputRootContext,
+  InputSlot,
+  InputText,
+  useInput
+};

package/dist/components/ui/input/label.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypographyProps } from '../typography.js';
+import 'class-variance-authority/types';
+import '@xjur-ui/util';
+
+type InputLabelProps = TypographyProps & {
+    htmlFor?: string;
+};
+declare const InputLabel: react.MemoExoticComponent<({ children, htmlFor, variant, weight, size, className, ...props }: InputLabelProps) => react_jsx_runtime.JSX.Element>;
+
+export { InputLabel, type InputLabelProps };