@utk09/finra-ui 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,194 @@
+# Finra UI
+
+React component library for web applications.
+
+[![CI](https://github.com/utk09/finra-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/utk09/finra-ui/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/@utk09/finra-ui.svg)](https://www.npmjs.com/package/@utk09/finra-ui)
+[![Storybook](https://img.shields.io/badge/Storybook-deployed-ff4785)](https://finra-ui.netlify.app)
+
+## Live Demo
+
+Browse all components with interactive examples: **[finra-ui.netlify.app](https://finra-ui.netlify.app)**
+
+## Installation
+
+```bash
+npm install @utk09/finra-ui
+# or
+pnpm add @utk09/finra-ui
+```
+
+## Quick Start
+
+Import the global styles **once** at the root of your app, then use any component:
+
+```tsx
+import "@utk09/finra-ui/styles";
+import { Button, Input, Badge } from "@utk09/finra-ui";
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Click me</Button>
+      <Input placeholder="Enter text..." />
+      <Badge sentiment="success">Active</Badge>
+    </div>
+  );
+}
+```
+
+## Components
+
+### 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)                                                                       |
+| `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:
+
+```tsx
+import {
+  ButtonBase,
+  CheckboxBase,
+  SwitchBase,
+  RadioButtonBase,
+  SliderBase,
+} from "@utk09/finra-ui/unstyled";
+```
+
+Available: `ButtonBase`, `IconButtonBase`, `InputBase`, `TextareaBase`, `NumberInputBase`, `CheckboxBase`, `SwitchBase`, `RadioButtonBase`, `SliderBase`.
+
+## Features
+
+### Variants & Sentiments
+
+Buttons and Badges support three **variants** and four **sentiments** that combine freely:
+
+```tsx
+<Button variant="primary" sentiment="danger">Delete</Button>
+<Button variant="secondary" sentiment="success">Approve</Button>
+<Badge variant="tertiary" sentiment="warning">Pending</Badge>
+```
+
+### Density System
+
+Control spacing globally via a `data-density` attribute on any ancestor element. All components respond automatically - no props needed:
+
+```tsx
+{
+  /* Compact UI for data-dense screens */
+}
+<div data-density="high">
+  <Button>Tight</Button>
+  <Input placeholder="Compact" />
+</div>;
+
+{
+  /* Spacious UI */
+}
+<div data-density="low">
+  <Button>Relaxed</Button>
+</div>;
+```
+
+Three levels: `high`, `medium` (default), `low`.
+
+### Theming
+
+Override design tokens via CSS custom properties. Every component uses `--color-*`, `--radius-*`, `--font-*` tokens defined in the global styles:
+
+```css
+:root {
+  --color-primary-600: #2563eb;
+  --color-error: #dc2626;
+  --radius-md: 0.375rem;
+}
+```
+
+### CSS Override Selectors
+
+Every component renders a stable `data-finra-ui` attribute for targeted CSS overrides:
+
+```css
+[data-finra-ui="button"] {
+  text-transform: uppercase;
+}
+
+[data-finra-ui="input"] {
+  min-height: 3rem;
+}
+```
+
+### Form Field Composition
+
+`FormField` automatically wires `id`, `aria-describedby`, `aria-invalid`, and `disabled` onto its child input:
+
+```tsx
+<FormField
+  label="Email"
+  required
+  validationStatus="error"
+  errorMessage="Please enter a valid email."
+  helperText="We'll never share your email.">
+  <Input placeholder="you@example.com" />
+</FormField>
+```
+
+### Zero External Runtime Dependencies
+
+The only runtime dependencies are `clsx` and `class-variance-authority`.
+
+## Development
+
+This is a pnpm monorepo with Turborepo.
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run development (Storybook)
+pnpm run dev
+
+# Build the library
+pnpm run build
+
+# Run tests
+pnpm run test
+
+# Type check
+pnpm run typecheck
+
+# Lint
+pnpm run lint
+
+# All checks at once
+pnpm run typecheck && pnpm run lint && pnpm run test
+```
+
+### Project Structure
+
+```txt
+packages/core/     - Component library (@utk09/finra-ui)
+apps/storybook/    - Storybook documentation app
+```
+
+## License
+
+[MIT](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';