@olundot/ui 0.9.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @olundot/ui
 
+## 0.10.1
+
+### Patch Changes
+
+- 4b65ff6: fix: OTPField fluid가 좁은 폭에서 실제로 한 줄을 유지하도록 - fieldset의 min-content 쿼크 해제(min-w-0), 그룹 w-full/min-w-0 추가, cell cap을 표준 max-w 유틸로 전환해 소비 앱 스캔 의존 제거.
+
+## 0.10.0
+
+### Minor Changes
+
+- 9bfcb6e: Add `bordered={false}` to `EmptyState` so embedded empty states can avoid nested container borders and backgrounds.
+
+  Add `fluid` to `OTPField` so narrow viewports keep OTP cells on one row while the default fixed-width layout remains unchanged.
+
 ## 0.9.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -32,8 +32,8 @@ declare function useOlunTheme(): UseOlunThemeValue;
 type SurfaceLevel = "surface" | "canvas" | "raised";
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
+    variant?: "default" | "primary" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
@@ -54,7 +54,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "leadingIcon" | "trailingIcon" | "loading" | "children"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -70,7 +70,7 @@ declare const inputVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
@@ -119,11 +119,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -142,10 +142,10 @@ interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelEl
 declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProps & React.RefAttributes<HTMLLabelElement>>;
 
 declare const alertVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | null | undefined;
+    variant?: "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inlineAlertVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | null | undefined;
+    variant?: "error" | "success" | "info" | "warning" | null | undefined;
     surface?: "filled" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
@@ -175,7 +175,7 @@ declare const textareaVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -230,7 +230,7 @@ declare const selectVariants: (props?: ({
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "error" | "success" | "default" | null | undefined;
+    state?: "default" | "error" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
@@ -896,8 +896,8 @@ declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProp
 declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<Popover$1.PopoverArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "brand" | "neutral" | "status" | "semantic" | "pill" | "vibrant" | null | undefined;
-    tone?: "accent" | "warning" | "info" | "success" | "neutral" | "danger" | null | undefined;
+    variant?: "status" | "semantic" | "neutral" | "brand" | "pill" | "vibrant" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "info" | "warning" | "neutral" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const badgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -915,7 +915,7 @@ declare const twoTierBadgeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const twoTierBadgeLineVariants: (props?: ({
     tier?: "primary" | "secondary" | null | undefined;
-    intent?: "brand" | "muted" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    intent?: "danger" | "success" | "warning" | "neutral" | "brand" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TwoTierBadgeIntent = NonNullable<VariantProps<typeof twoTierBadgeLineVariants>["intent"]>;
 interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof twoTierBadgeVariants> {
@@ -929,7 +929,7 @@ interface TwoTierBadgeProps extends React.HTMLAttributes<HTMLDivElement>, Varian
 declare const TwoTierBadge: React.ForwardRefExoticComponent<TwoTierBadgeProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const statusBadgeVariants: (props?: ({
-    status?: "error" | "warning" | "info" | "success" | "active" | "pending" | "archived" | null | undefined;
+    status?: "error" | "success" | "info" | "warning" | "active" | "pending" | "archived" | null | undefined;
     size?: "xs" | "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const statusBadgeDotVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
@@ -959,12 +959,12 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    tone?: "accent" | "danger" | "success" | "warning" | "neutral" | "muted" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
@@ -980,6 +980,7 @@ declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttribu
 
 declare const emptyStateBaseVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
+    bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
 interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVariants> {
@@ -987,7 +988,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
     surface?: SurfaceLevel;
     className?: string;
 }
-declare function emptyStateVariants({ size, tone, surface, className }?: EmptyStateVariantOptions): string;
+declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1158,7 +1159,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
+    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1199,17 +1200,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
+    fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "compact" | "default" | null | undefined;
+    size?: "default" | "compact" | null | undefined;
+    fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "error" | "default" | null | undefined;
+    state?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1224,6 +1227,7 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
     onValueChange?: (value: string) => void;
     readOnly?: boolean;
     size?: OTPFieldSize;
+    fluid?: boolean;
     /**
      * Background level for normal OTP cells. Filled, invalid, disabled, and
      * readOnly states take precedence.
@@ -1265,11 +1269,11 @@ declare const checkboxBoxVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1294,7 +1298,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1315,16 +1319,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "card" | "plain" | null | undefined;
+    appearance?: "plain" | "card" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;

package/dist/index.js

@@ -6119,7 +6119,6 @@ import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
 var emptyStateBaseVariants = cva18(
   [
     "flex flex-col items-center justify-center text-center",
-    "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
     "text-foreground"
   ].join(" "),
   {
@@ -6128,10 +6127,15 @@ var emptyStateBaseVariants = cva18(
         sm: "gap-[var(--space-1)] px-[var(--space-2)] py-[var(--space-3)]",
         md: "gap-[var(--space-1-5)] px-[var(--space-3)] py-[var(--space-5)]",
         lg: "gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-6)]"
+      },
+      bordered: {
+        true: "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+        false: ""
       }
     },
     defaultVariants: {
-      size: "md"
+      size: "md",
+      bordered: true
     }
   }
 );
@@ -6146,10 +6150,17 @@ function getEmptyStateToneSurface(tone) {
       return surfaceClassNames.surface;
   }
 }
-function emptyStateVariants({ size, tone = "neutral", surface, className } = {}) {
+function emptyStateVariants({
+  size,
+  tone = "neutral",
+  surface,
+  bordered = true,
+  className
+} = {}) {
+  const hasBorder = bordered !== false;
   return cn(
-    emptyStateBaseVariants({ size }),
-    surface ? surfaceClassNames[surface] : getEmptyStateToneSurface(tone),
+    emptyStateBaseVariants({ size, bordered: hasBorder }),
+    hasBorder ? surface ? surfaceClassNames[surface] : getEmptyStateToneSurface(tone) : null,
     className
   );
 }
@@ -6187,6 +6198,7 @@ var EmptyState = React31.forwardRef(
     description,
     hint,
     action,
+    bordered = true,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
@@ -6196,7 +6208,7 @@ var EmptyState = React31.forwardRef(
         ref,
         role: "status",
         "data-slot": "empty-state",
-        className: cn(emptyStateVariants({ size, tone, surface, className })),
+        className: cn(emptyStateVariants({ size, tone, surface, bordered, className })),
         ...props,
         children: [
           Icon ? /* @__PURE__ */ jsx40(
@@ -7141,7 +7153,7 @@ import * as React37 from "react";
 import { cva as cva25 } from "class-variance-authority";
 import { AlertCircle as AlertCircle6 } from "lucide-react";
 import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
-var otpFieldVariants = cva25("flex w-full flex-col gap-[var(--space-1-5)]", {
+var otpFieldVariants = cva25("flex w-full min-w-0 flex-col gap-[var(--space-1-5)]", {
   variants: {
     size: {
       default: "",
@@ -7152,20 +7164,25 @@ var otpFieldVariants = cva25("flex w-full flex-col gap-[var(--space-1-5)]", {
     size: "default"
   }
 });
-var otpFieldGroupVariants = cva25("flex flex-wrap items-start gap-[var(--space-1)] pt-[var(--space-0-5)]", {
+var otpFieldGroupVariants = cva25("flex items-start gap-[var(--space-1)] pt-[var(--space-0-5)]", {
   variants: {
     size: {
       default: "",
       compact: ""
+    },
+    fluid: {
+      true: "flex-nowrap justify-center w-full min-w-0",
+      false: "flex-wrap"
     }
   },
   defaultVariants: {
-    size: "default"
+    size: "default",
+    fluid: false
   }
 });
 var otpCellVariants = cva25(
   [
-    "flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
+    "flex items-center justify-center rounded-[var(--radius-sm)] border",
     "border-[var(--border)] text-foreground",
     "font-[family-name:var(--font-display)] tabular-nums",
     "text-center leading-none caret-[var(--accent-fg)]",
@@ -7180,13 +7197,40 @@ var otpCellVariants = cva25(
   {
     variants: {
       size: {
-        default: "h-[60px] w-[52px] text-[24px]",
-        compact: "h-[52px] w-[44px] text-[20px]"
+        default: "h-[60px] text-[24px]",
+        compact: "h-[52px] text-[20px]"
+      },
+      fluid: {
+        true: "min-w-0 flex-1",
+        false: "shrink-0"
       },
       surface: fieldSurfaceClassNames
     },
+    compoundVariants: [
+      {
+        size: "default",
+        fluid: false,
+        className: "w-[52px]"
+      },
+      {
+        size: "compact",
+        fluid: false,
+        className: "w-[44px]"
+      },
+      {
+        size: "default",
+        fluid: true,
+        className: "max-w-13"
+      },
+      {
+        size: "compact",
+        fluid: true,
+        className: "max-w-11"
+      }
+    ],
     defaultVariants: {
       size: "default",
+      fluid: false,
       surface: "surface"
     }
   }
@@ -7244,6 +7288,7 @@ var OTPField = React37.forwardRef(
     helperText,
     id,
     invalid,
+    fluid = false,
     label,
     length = 6,
     name,
@@ -7320,7 +7365,7 @@ var OTPField = React37.forwardRef(
               "data-slot": "otp-field-group",
               "aria-labelledby": labelId,
               "aria-describedby": groupDescribedBy,
-              className: cn(otpFieldGroupVariants({ size })),
+              className: cn(otpFieldGroupVariants({ size, fluid })),
               children: Array.from({ length }, (_, index) => {
                 const digit = resolvedSlots[index] ?? "";
                 const inputId = `${fieldId}-cell-${index + 1}`;
@@ -7412,7 +7457,7 @@ var OTPField = React37.forwardRef(
                     onFocus: (event) => {
                       event.currentTarget.select();
                     },
-                    className: cn(otpCellVariants({ size, surface }))
+                    className: cn(otpCellVariants({ size, surface, fluid }))
                   },
                   inputId
                 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [