@xjur-ui/react 1.0.0 → 1.0.1

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,335 +0,0 @@
-// 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

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

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

@@ -1,10 +0,0 @@
-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 InputMessageProps = TypographyProps;
-declare const InputMessage: react.MemoExoticComponent<({ children, className, weight, variant, size, ...props }: InputMessageProps) => react_jsx_runtime.JSX.Element>;
-
-export { InputMessage, type InputMessageProps };

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

@@ -1,128 +0,0 @@
-// src/components/ui/input/message.tsx
-import { memo as memo2 } from "react";
-import { cx as cx2 } 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/root.tsx
-import { createContext, use } from "react";
-import { cx } from "@xjur-ui/util";
-import { jsx as jsx2, 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/message.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var InputMessage = memo2(
-  ({
-    children,
-    className,
-    weight = "normal",
-    variant = "body",
-    size = "sm-1x",
-    ...props
-  }) => {
-    const { errorMessage } = useInput();
-    return /* @__PURE__ */ jsx3(
-      Typography,
-      {
-        className: cx2(
-          "text-neutral-dark data-[error=true]:text-danger-idle",
-          className
-        ),
-        "data-error": !!errorMessage,
-        size,
-        variant,
-        weight,
-        ...props,
-        children
-      }
-    );
-  }
-);
-InputMessage.displayName = "InputMessage";
-export {
-  InputMessage
-};

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

@@ -1,18 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ComponentProps } from 'react';
-
-declare const InputRootContext: react.Context<InputRoot>;
-declare function useInput(): InputRoot;
-type InputRootProps = ComponentProps<'div'> & {
-    children: ComponentProps<'div'>['children'];
-} & InputRoot;
-type InputRoot = {
-    size?: 'md' | 'lg';
-    rounded?: boolean;
-    errorMessage?: string;
-    disabled?: boolean;
-};
-declare function InputRoot({ children, className, errorMessage, size, rounded, disabled, ...props }: InputRootProps): react_jsx_runtime.JSX.Element;
-
-export { InputRoot, InputRootContext, type InputRootProps, useInput };

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

@@ -1,10 +0,0 @@
-import * as react from 'react';
-import { ComponentProps } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type InputSlotProps = ComponentProps<'label'> & {
-    children: ComponentProps<'label'>['children'];
-};
-declare const InputSlot: react.MemoExoticComponent<({ children, className, ...props }: InputSlotProps) => react_jsx_runtime.JSX.Element>;
-
-export { InputSlot, type InputSlotProps };

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

@@ -1,20 +0,0 @@
-// src/components/ui/input/slot.tsx
-import { memo } from "react";
-import { cx } from "@xjur-ui/util";
-import { jsx } from "react/jsx-runtime";
-var InputSlot = memo(
-  ({ children, className, ...props }) => {
-    return /* @__PURE__ */ jsx(
-      "label",
-      {
-        ...props,
-        className: cx("flex items-center justify-center", className),
-        children
-      }
-    );
-  }
-);
-InputSlot.displayName = "InputSlot";
-export {
-  InputSlot
-};

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

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MaskOptions } from '@react-input/mask';
-import { ComponentProps } from 'react';
-
-type InputTextProps = ComponentProps<'input'> & {
-    mask?: MaskOptions;
-};
-declare function InputText({ className, value, mask, ...props }: InputTextProps): react_jsx_runtime.JSX.Element;
-
-export { InputText, type InputTextProps };