@utk09/finra-ui 0.0.2 → 0.0.3

package/README.md

@@ -41,29 +41,39 @@ function App() {
 
 ### Styled Components
 
-| Component     | Description                                                                                  |
-| ------------- | -------------------------------------------------------------------------------------------- |
-| `Button`      | Button with variant (primary/secondary/tertiary) and sentiment (danger/success/warning/info) |
-| `IconButton`  | Icon-only button with `aria-label` requirement                                               |
-| `ButtonGroup` | Groups buttons with merged borders                                                           |
-| `Input`       | Text input with variants, validation states, adornments, and clearable support               |
-| `Textarea`    | Multi-line text input with character count and auto-resize                                   |
-| `NumberInput` | Numeric input with increment/decrement buttons                                               |
-| `FormField`   | Wrapper that wires label, helper text, and error message with a11y attributes                |
-| `Checkbox`    | Custom-styled checkbox with indeterminate support                                            |
-| `Switch`      | Toggle switch (on/off)                                                                       |
-| `Badge`       | Inline status/category label with variant and sentiment                                      |
-| `Divider`     | Horizontal or vertical separator                                                             |
+| Component      | Description                                                                                  |
+| -------------- | -------------------------------------------------------------------------------------------- |
+| `Button`       | Button with variant (primary/secondary/tertiary) and sentiment (danger/success/warning/info) |
+| `IconButton`   | Icon-only button with `aria-label` requirement                                               |
+| `ButtonGroup`  | Groups buttons with merged borders                                                           |
+| `Input`        | Text input with variants, validation states, adornments, and clearable support               |
+| `Textarea`     | Multi-line text input with character count and auto-resize                                   |
+| `NumberInput`  | Numeric input with increment/decrement buttons                                               |
+| `FormField`    | Wrapper that wires label, helper text, and error message with a11y attributes                |
+| `Checkbox`     | Custom-styled checkbox with indeterminate support                                            |
+| `Switch`       | Toggle switch (on/off)                                                                       |
+| `RadioButton`  | Radio button for grouped exclusive selection                                                 |
+| `Slider`       | Range slider with optional label and value display                                           |
+| `PillInput`    | Tokenized tag/pill input with keyboard support                                               |
+| `FileDropZone` | Drag-and-drop file upload zone                                                               |
+| `Badge`        | Inline status/category label with variant and sentiment                                      |
+| `Divider`      | Horizontal or vertical separator                                                             |
 
 ### Unstyled Components
 
-Every styled component has an unstyled base that provides only behavior and accessibility — no visual styles. Import from the `/unstyled` entry point:
+Every styled component has an unstyled base that provides only behavior and accessibility - no visual styles. Import from the `/unstyled` entry point:
 
 ```tsx
-import { ButtonBase, CheckboxBase, SwitchBase } from "@utk09/finra-ui/unstyled";
+import {
+  ButtonBase,
+  CheckboxBase,
+  SwitchBase,
+  RadioButtonBase,
+  SliderBase,
+} from "@utk09/finra-ui/unstyled";
 ```
 
-Available: `ButtonBase`, `IconButtonBase`, `InputBase`, `TextareaBase`, `NumberInputBase`, `CheckboxBase`, `SwitchBase`.
+Available: `ButtonBase`, `IconButtonBase`, `InputBase`, `TextareaBase`, `NumberInputBase`, `CheckboxBase`, `SwitchBase`, `RadioButtonBase`, `SliderBase`.
 
 ## Features
 
@@ -79,7 +89,7 @@ Buttons and Badges support three **variants** and four **sentiments** that combi
 
 ### Density System
 
-Control spacing globally via a `data-density` attribute on any ancestor element. All components respond automatically — no props needed:
+Control spacing globally via a `data-density` attribute on any ancestor element. All components respond automatically - no props needed:
 
 ```tsx
 {
@@ -143,7 +153,7 @@ Every component renders a stable `data-finra-ui` attribute for targeted CSS over
 
 ### Zero External Runtime Dependencies
 
-The only runtime dependencies are `clsx` and `class-variance-authority` — no Radix, no Emotion, no runtime CSS-in-JS.
+The only runtime dependencies are `clsx` and `class-variance-authority`.
 
 ## Development
 
@@ -175,8 +185,8 @@ pnpm run typecheck && pnpm run lint && pnpm run test
 ### Project Structure
 
 ```txt
-packages/core/     — Component library (@utk09/finra-ui)
-apps/storybook/    — Storybook documentation app
+packages/core/     - Component library (@utk09/finra-ui)
+apps/storybook/    - Storybook documentation app
 ```
 
 ## License

package/dist/Slider-BXQjDfhb.js

@@ -0,0 +1,73 @@
+import { jsx as c, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as f, isValidElement as p, cloneElement as l, useRef as y, useEffect as m } from "react";
+function B(...e) {
+  return (o) => {
+    for (const t of e)
+      typeof t == "function" ? t(o) : t && typeof t == "object" && (t.current = o);
+  };
+}
+function d(e, o) {
+  const t = { ...e, ...o };
+  for (const n of Object.keys(e)) {
+    if (n === "children" || n === "ref") continue;
+    const s = e[n], r = o[n];
+    typeof s == "function" && typeof r == "function" && (t[n] = (...a) => {
+      r(...a), s(...a);
+    }), n === "className" && typeof s == "string" && typeof r == "string" && (t[n] = `${s} ${r}`.trim()), n === "style" && typeof s == "object" && typeof r == "object" && (t[n] = { ...s, ...r });
+  }
+  return t;
+}
+const i = f(
+  ({ children: e, ...o }, t) => {
+    if (!p(e))
+      return null;
+    const n = e.props, s = e.ref;
+    return l(e, {
+      ...d(o, n),
+      ref: B(t, s)
+    });
+  }
+);
+i.displayName = "Slot";
+const b = f(
+  ({ asChild: e = !1, ...o }, t) => /* @__PURE__ */ c(e ? i : "button", { ref: t, ...o })
+);
+b.displayName = "ButtonBase";
+const R = f(
+  ({ asChild: e = !1, icon: o, children: t, ...n }, s) => /* @__PURE__ */ u(e ? i : "button", { ref: s, ...n, children: [
+    o,
+    t
+  ] })
+);
+R.displayName = "IconButtonBase";
+function h(...e) {
+  return (o) => {
+    for (const t of e)
+      typeof t == "function" ? t(o) : t && typeof t == "object" && (t.current = o);
+  };
+}
+const N = f(
+  ({ indeterminate: e, ...o }, t) => {
+    const n = y(null);
+    return m(() => {
+      n.current && (n.current.indeterminate = e ?? !1);
+    }, [e]), /* @__PURE__ */ c("input", { ref: h(t, n), type: "checkbox", ...o });
+  }
+);
+N.displayName = "CheckboxBase";
+const j = f((e, o) => /* @__PURE__ */ c("input", { ref: o, type: "checkbox", role: "switch", ...e }));
+j.displayName = "SwitchBase";
+const x = f((e, o) => /* @__PURE__ */ c("input", { ref: o, type: "radio", ...e }));
+x.displayName = "RadioButtonBase";
+const C = f((e, o) => /* @__PURE__ */ c("input", { ref: o, type: "range", ...e }));
+C.displayName = "SliderBase";
+export {
+  b as B,
+  N as C,
+  R as I,
+  x as R,
+  j as S,
+  C as a,
+  i as b
+};
+//# sourceMappingURL=Slider-BXQjDfhb.js.map

package/dist/Slider-BXQjDfhb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-BXQjDfhb.js","sources":["../src/unstyled/Slot.tsx","../src/unstyled/Button/Button.tsx","../src/unstyled/IconButton/IconButton.tsx","../src/unstyled/Checkbox/Checkbox.tsx","../src/unstyled/Switch/Switch.tsx","../src/unstyled/RadioButton/RadioButton.tsx","../src/unstyled/Slider/Slider.tsx"],"sourcesContent":["import {\n  forwardRef,\n  isValidElement,\n  cloneElement,\n  type ReactNode,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\n\nfunction mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T> {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        ref(value);\n      } else if (ref && typeof ref === \"object\") {\n        (ref as React.RefObject<T | null>).current = value;\n      }\n    }\n  };\n}\n\nfunction mergeProps(\n  slotProps: Record<string, unknown>,\n  childProps: Record<string, unknown>,\n): Record<string, unknown> {\n  const merged: Record<string, unknown> = { ...slotProps, ...childProps };\n\n  for (const key of Object.keys(slotProps)) {\n    if (key === \"children\" || key === \"ref\") continue;\n\n    const slotVal = slotProps[key];\n    const childVal = childProps[key];\n\n    // Merge event handlers\n    if (typeof slotVal === \"function\" && typeof childVal === \"function\") {\n      merged[key] = (...args: unknown[]) => {\n        childVal(...args);\n        slotVal(...args);\n      };\n    }\n\n    // Merge className\n    if (key === \"className\" && typeof slotVal === \"string\" && typeof childVal === \"string\") {\n      merged[key] = `${slotVal} ${childVal}`.trim();\n    }\n\n    // Merge style\n    if (key === \"style\" && typeof slotVal === \"object\" && typeof childVal === \"object\") {\n      merged[key] = { ...(slotVal as object), ...(childVal as object) };\n    }\n  }\n\n  return merged;\n}\n\nexport interface SlotProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n}\n\nexport const Slot = forwardRef<HTMLElement, SlotProps>(\n  ({ children, ...slotProps }, forwardedRef) => {\n    if (!isValidElement(children)) {\n      return null;\n    }\n\n    const childProps = children.props as Record<string, unknown>;\n    const childRef = (children as unknown as { ref?: Ref<HTMLElement> }).ref;\n\n    return cloneElement(children, {\n      ...mergeProps(slotProps, childProps),\n      ref: mergeRefs(forwardedRef, childRef),\n    } as Record<string, unknown>);\n  },\n);\n\nSlot.displayName = \"Slot\";\n","import { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n}\n\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    return <Comp ref={ref} {...props} />;\n  },\n);\n\nButtonBase.displayName = \"ButtonBase\";\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface IconButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n  icon: ReactNode;\n  \"aria-label\": string;\n}\n\nexport const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>(\n  ({ asChild = false, icon, children, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    return (\n      <Comp ref={ref} {...props}>\n        {icon}\n        {children}\n      </Comp>\n    );\n  },\n);\n\nIconButtonBase.displayName = \"IconButtonBase\";\n","import { forwardRef, useEffect, useRef, type InputHTMLAttributes, type Ref } from \"react\";\n\nexport interface CheckboxBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  indeterminate?: boolean;\n}\n\nfunction mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        ref(value);\n      } else if (ref && typeof ref === \"object\") {\n        (ref as React.RefObject<T | null>).current = value;\n      }\n    }\n  };\n}\n\nexport const CheckboxBase = forwardRef<HTMLInputElement, CheckboxBaseProps>(\n  ({ indeterminate, ...props }, forwardedRef) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return <input ref={mergeRefs(forwardedRef, internalRef)} type=\"checkbox\" {...props} />;\n  },\n);\n\nCheckboxBase.displayName = \"CheckboxBase\";\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\n\nexport interface SwitchBaseProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"role\"\n> {}\n\nexport const SwitchBase = forwardRef<HTMLInputElement, SwitchBaseProps>((props, ref) => {\n  return <input ref={ref} type=\"checkbox\" role=\"switch\" {...props} />;\n});\n\nSwitchBase.displayName = \"SwitchBase\";\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\n\nexport interface RadioButtonBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {}\n\nexport const RadioButtonBase = forwardRef<HTMLInputElement, RadioButtonBaseProps>((props, ref) => {\n  return <input ref={ref} type=\"radio\" {...props} />;\n});\n\nRadioButtonBase.displayName = \"RadioButtonBase\";\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\n\nexport interface SliderBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {}\n\nexport const SliderBase = forwardRef<HTMLInputElement, SliderBaseProps>((props, ref) => {\n  return <input ref={ref} type=\"range\" {...props} />;\n});\n\nSliderBase.displayName = \"SliderBase\";\n"],"names":["mergeRefs","refs","value","ref","mergeProps","slotProps","childProps","merged","key","slotVal","childVal","args","Slot","forwardRef","children","forwardedRef","isValidElement","childRef","cloneElement","ButtonBase","asChild","props","jsx","IconButtonBase","icon","jsxs","CheckboxBase","indeterminate","internalRef","useRef","useEffect","SwitchBase","RadioButtonBase","SliderBase"],"mappings":"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"}

package/dist/components/FileDropZone/FileDropZone.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FileDropZoneProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Called with selected files. */
+    onChange?: (files: File[]) => void;
+    /** Accepted file types (e.g. ".pdf,.csv" or "image/*"). */
+    accept?: string;
+    /** Allow multiple file selection. */
+    multiple?: boolean;
+    /** Disable the component. */
+    disabled?: boolean;
+    /** Custom content inside the drop zone. */
+    children?: ReactNode;
+}
+export declare const FileDropZone: import('react').ForwardRefExoticComponent<FileDropZoneProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/PillInput/PillInput.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface PillInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Current list of pills (controlled). */
+    values?: string[];
+    /** Called when the pill list changes. */
+    onChange?: (values: string[]) => void;
+    /** Placeholder shown when no pills and input is empty. */
+    placeholder?: string;
+    /** Disable the entire component. */
+    disabled?: boolean;
+    /** Maximum number of pills allowed. */
+    maxPills?: number;
+    /** Characters that trigger pill creation (default: Enter). */
+    delimiters?: string[];
+}
+export declare const PillInput: import('react').ForwardRefExoticComponent<PillInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,6 @@
+import { RadioButtonBaseProps } from '../../unstyled/RadioButton/RadioButton';
+export interface RadioButtonProps extends Omit<RadioButtonBaseProps, "className"> {
+    label?: string;
+    className?: string;
+}
+export declare const RadioButton: import('react').ForwardRefExoticComponent<RadioButtonProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,7 @@
+import { SliderBaseProps } from '../../unstyled/Slider/Slider';
+export interface SliderProps extends Omit<SliderBaseProps, "className"> {
+    label?: string;
+    showValue?: boolean;
+    className?: string;
+}
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/componentIds.d.ts

@@ -18,6 +18,10 @@ export declare const componentIds: {
     readonly formFieldError: "form-field-error";
     readonly checkbox: "checkbox";
     readonly switch: "switch";
+    readonly radioButton: "radio-button";
+    readonly slider: "slider";
+    readonly pillInput: "pill-input";
+    readonly fileDropZone: "file-drop-zone";
     readonly badge: "badge";
     readonly divider: "divider";
 };

package/dist/index.d.ts

@@ -18,6 +18,14 @@ export { Checkbox } from './components/Checkbox/Checkbox';
 export type { CheckboxProps } from './components/Checkbox/Checkbox';
 export { Switch } from './components/Switch/Switch';
 export type { SwitchProps } from './components/Switch/Switch';
+export { RadioButton } from './components/RadioButton/RadioButton';
+export type { RadioButtonProps } from './components/RadioButton/RadioButton';
+export { Slider } from './components/Slider/Slider';
+export type { SliderProps } from './components/Slider/Slider';
+export { PillInput } from './components/PillInput/PillInput';
+export type { PillInputProps } from './components/PillInput/PillInput';
+export { FileDropZone } from './components/FileDropZone/FileDropZone';
+export type { FileDropZoneProps } from './components/FileDropZone/FileDropZone';
 export { Badge } from './components/Badge/Badge';
 export type { BadgeProps, BadgeSentiment } from './components/Badge/Badge';
 export { Divider } from './components/Divider/Divider';