@xjur-ui/react 1.0.0 → 1.0.1

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

@@ -1,195 +0,0 @@
-// 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/src/components/ui/accordion.tsx

@@ -1,3 +0,0 @@
-export function Accordion() {
-  return <div>Accordion Test</div>
-}

package/src/components/ui/index.ts

@@ -1,13 +0,0 @@
-export { Button, type ButtonProps } from './button'
-export { Icon, type IconProps } from './icon'
-export { Typography, type TypographyProps } from './typography'
-export { Logo, type LogoProps } from './logo'
-
-export { InputRoot, type InputRootProps } from './input/root'
-export { InputText, type InputTextProps } from './input/text'
-export { InputContent, type InputContentProps } from './input/content'
-export { InputSlot, type InputSlotProps } from './input/slot'
-
-export { OTPInput } from './otp-input'
-
-export { Accordion } from './accordion'

package/src/components/ui/input/content.tsx

@@ -1,59 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cx, cva } from '@xjur-ui/util'
-import { useInput } from './root'
-
-const variants = cva(
-  [
-    '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
-    }
-  }
-)
-
-export type InputContentProps = ComponentProps<'div'> & {
-  children: ComponentProps<'div'>['children']
-}
-
-export function InputContent({
-  className,
-  children,
-  ...props
-}: InputContentProps) {
-  const { errorMessage, rounded, disabled } = useInput()
-
-  const classNames = variants({
-    className,
-    isError: !!errorMessage,
-    rounded
-  })
-
-  return (
-    <div
-      {...props}
-      className={cx('group', classNames)}
-      data-disabled={disabled}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/ui/input/index.ts

@@ -1,6 +0,0 @@
-export * from './root'
-export * from './text'
-export * from './content'
-export * from './slot'
-export * from './message'
-export * from './label'

package/src/components/ui/input/label.tsx

@@ -1,41 +0,0 @@
-import { memo } from 'react'
-import { cx } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from '../typography'
-import { useInput } from './root'
-
-export type InputLabelProps = TypographyProps & {
-  htmlFor?: string
-}
-
-export const InputLabel = memo(
-  ({
-    children,
-    htmlFor,
-    variant = 'label',
-    weight = 'medium',
-    size = 'sm',
-    className,
-    ...props
-  }: InputLabelProps) => {
-    const { errorMessage } = useInput()
-
-    return (
-      <Typography
-        asChild={true}
-        className={cx(
-          'text-title-neutral data-[error=true]:text-danger-label-active w-fit',
-          className
-        )}
-        data-error={!!errorMessage}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      >
-        <label htmlFor={htmlFor}>{children}</label>
-      </Typography>
-    )
-  }
-)
-
-InputLabel.displayName = 'InputLabel'

package/src/components/ui/input/message.tsx

@@ -1,37 +0,0 @@
-import { memo } from 'react'
-import { cx } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from '../typography'
-import { useInput } from './root'
-
-export type InputMessageProps = TypographyProps
-
-export const InputMessage = memo(
-  ({
-    children,
-    className,
-    weight = 'normal',
-    variant = 'body',
-    size = 'sm-1x',
-    ...props
-  }: InputMessageProps) => {
-    const { errorMessage } = useInput()
-
-    return (
-      <Typography
-        className={cx(
-          'text-neutral-dark data-[error=true]:text-danger-idle',
-          className
-        )}
-        data-error={!!errorMessage}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-
-InputMessage.displayName = 'InputMessage'

package/src/components/ui/input/root.tsx

@@ -1,57 +0,0 @@
-import { type ComponentProps, createContext, use } from 'react'
-import { cx } from '@xjur-ui/util'
-import { InputMessage } from './message'
-
-export type InputRoot = {
-  size?: 'md' | 'lg'
-  rounded?: boolean
-  errorMessage?: string
-  disabled?: boolean
-}
-
-export const InputRootContext = createContext({} as InputRoot)
-
-export function useInput() {
-  const context = use(InputRootContext)
-
-  if (!context) {
-    throw new Error(
-      'useInput must be called within <Input.Root> or <Select.Root>'
-    )
-  }
-
-  return context
-}
-
-export type InputRootProps = ComponentProps<'div'> & {
-  children: ComponentProps<'div'>['children']
-} & InputRoot
-
-export function InputRoot({
-  children,
-  className,
-  errorMessage,
-  size = 'lg',
-  rounded = false,
-  disabled,
-  ...props
-}: InputRootProps) {
-  return (
-    <InputRootContext.Provider
-      value={{ errorMessage, disabled, size, rounded }}
-    >
-      <div
-        {...props}
-        className={cx(
-          'group gap-small relative flex flex-col data-[disabled=true]:opacity-60',
-          className
-        )}
-        data-disabled={disabled}
-      >
-        {children}
-
-        {errorMessage && <InputMessage>{errorMessage}</InputMessage>}
-      </div>
-    </InputRootContext.Provider>
-  )
-}

package/src/components/ui/input/slot.tsx

@@ -1,21 +0,0 @@
-import { type ComponentProps, memo } from 'react'
-import { cx } from '@xjur-ui/util'
-
-export type InputSlotProps = ComponentProps<'label'> & {
-  children: ComponentProps<'label'>['children']
-}
-
-export const InputSlot = memo(
-  ({ children, className, ...props }: InputSlotProps) => {
-    return (
-      <label
-        {...props}
-        className={cx('flex items-center justify-center', className)}
-      >
-        {children}
-      </label>
-    )
-  }
-)
-
-InputSlot.displayName = 'InputSlot'

package/src/components/ui/input/text.tsx

@@ -1,69 +0,0 @@
-import { InputMask, type MaskOptions } from '@react-input/mask'
-import { type ComponentProps, useCallback, useEffect, useRef } from 'react'
-import { cx } from '@xjur-ui/util'
-import { useInput } from './root'
-
-export type InputTextProps = ComponentProps<'input'> & { mask?: MaskOptions }
-
-export function InputText({
-  className,
-  value,
-  mask,
-  ...props
-}: InputTextProps) {
-  const { errorMessage } = useInput()
-  const inputRef = useRef<HTMLInputElement>(null)
-  const InputComponent = mask ? InputMask : 'input'
-
-  const onCheckInputFilled = useCallback(
-    ({ shouldUnfill = false }: { shouldUnfill: boolean }) => {
-      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: HTMLInputElement) {
-    inputRef.current = ref
-
-    if (typeof props.ref === 'function') {
-      props.ref(ref)
-    }
-  }
-
-  useEffect(() => {
-    onCheckInputFilled({ shouldUnfill: false })
-  }, [onCheckInputFilled])
-
-  return (
-    <InputComponent
-      {...props}
-      {...(mask && { ...mask })}
-      className={cx(
-        '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 !== undefined && props.readOnly}
-      ref={setRef}
-      value={value}
-      onBlur={event => {
-        props.onBlur?.(event)
-        onCheckInputFilled({ shouldUnfill: false })
-      }}
-      onFocus={event => {
-        props.onFocus?.(event)
-        onCheckInputFilled({ shouldUnfill: true })
-      }}
-    />
-  )
-}