@misael703/ui 1.51.0 → 1.52.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misael703/ui",
-  "version": "1.51.0",
+  "version": "1.52.1",
   "description": "Generic React + TypeScript UI kit, optimized for Next.js. Tokens, accessible components, runtime-configurable theming via presets.",
   "author": "Misael Ocas <misael.ocas@gmail.com>",
   "license": "MIT",

package/dist/chunk-4N2PCBGA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Toggle.tsx"],"names":["Toggle","ToggleGroupItem"],"mappings":"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","file":"chunk-4N2PCBGA.mjs","sourcesContent":["'use client';\nimport * as React from 'react';\nimport { cx } from '../utils/cx';\n\nexport type ToggleSize = 'sm' | 'md' | 'lg';\nexport type ToggleVariant = 'default' | 'outline';\n\nexport interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n}\n\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n  { pressed, defaultPressed, onPressedChange, size = 'md', variant = 'default', className, children, onClick, ...rest },\n  ref\n) {\n  const [internal, setInternal] = React.useState(defaultPressed ?? false);\n  const isControlled = pressed !== undefined;\n  const value = isControlled ? pressed : internal;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-pressed={value}\n      data-state={value ? 'on' : 'off'}\n      className={cx('toggle', `toggle--${size}`, `toggle--${variant}`, value && 'is-pressed', className)}\n      onClick={(e) => {\n        const next = !value;\n        if (!isControlled) setInternal(next);\n        onPressedChange?.(next);\n        onClick?.(e);\n      }}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n\ninterface ToggleGroupContextValue {\n  type: 'single' | 'multiple';\n  value: string | string[];\n  setValue: (next: string | string[]) => void;\n  size: ToggleSize;\n  variant: ToggleVariant;\n  disabled: boolean;\n}\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null);\n\ninterface ToggleGroupBaseProps {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  disabled?: boolean;\n  className?: string;\n  ariaLabel?: string;\n  children: React.ReactNode;\n}\n\nexport interface ToggleGroupSingleProps extends ToggleGroupBaseProps {\n  type: 'single';\n  value?: string | null;\n  defaultValue?: string;\n  onChange?: (value: string | null) => void;\n  rovingFocus?: boolean;\n}\n\nexport interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {\n  type: 'multiple';\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (value: string[]) => void;\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nexport function ToggleGroup(props: ToggleGroupProps) {\n  const { type, size = 'md', variant = 'default', disabled = false, className, ariaLabel, children } = props;\n\n  const initial: string | string[] =\n    type === 'single' ? (props.defaultValue ?? '') : (props.defaultValue ?? []);\n  const [internal, setInternal] = React.useState<string | string[]>(initial);\n\n  const isControlled = props.value !== undefined && props.value !== null;\n  const current: string | string[] = isControlled\n    ? type === 'single'\n      ? (props.value ?? '')\n      : (props.value ?? [])\n    : internal;\n\n  const setValue = (next: string | string[]) => {\n    if (!isControlled) setInternal(next);\n    if (type === 'single') {\n      const v = (next as string) || null;\n      (props as ToggleGroupSingleProps).onChange?.(v);\n    } else {\n      (props as ToggleGroupMultipleProps).onChange?.(next as string[]);\n    }\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={{ type, value: current, setValue, size, variant, disabled }}>\n      <div role=\"group\" aria-label={ariaLabel} className={cx('toggle-group', className)}>\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\n/**\n * `SegmentedControl` — a single-select `ToggleGroup` with equal-width\n * segments. The common case (view switcher, filter mode, on/off pair) is\n * `type=\"single\"`; this drops the discriminant so you can't trip the\n * cryptic union error from forgetting `type`. Use `SegmentedControlItem`\n * (alias of `ToggleGroupItem`) for the options.\n *\n *   <SegmentedControl value={view} onChange={setView} ariaLabel=\"Vista\">\n *     <SegmentedControlItem value=\"list\">Lista</SegmentedControlItem>\n *     <SegmentedControlItem value=\"grid\">Tarjetas</SegmentedControlItem>\n *   </SegmentedControl>\n */\nexport type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'>;\n\nexport function SegmentedControl({ className, ...rest }: SegmentedControlProps) {\n  return <ToggleGroup type=\"single\" className={cx('toggle-group--segmented', className)} {...rest} />;\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  value: string;\n  /**\n   * Optional leading icon, rendered before `children` and aligned via the\n   * toggle's built-in flex gap. Convenience for view switchers / segmented\n   * controls: `<SegmentedControlItem value=\"table\" icon={<Table />}>Tabla</…>`.\n   * For an **icon-only** segment, pass `icon` with no children and give the\n   * button an accessible name via `aria-label` (icons are decorative).\n   */\n  icon?: React.ReactNode;\n}\n\nexport const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(function ToggleGroupItem(\n  { value, className, children, icon, disabled: itemDisabled, ...rest },\n  ref\n) {\n  const ctx = React.useContext(ToggleGroupContext);\n  if (!ctx) throw new Error('ToggleGroupItem must be used inside ToggleGroup');\n  const isPressed =\n    ctx.type === 'single'\n      ? ctx.value === value\n      : Array.isArray(ctx.value) && ctx.value.includes(value);\n\n  const onClick = () => {\n    if (ctx.type === 'single') {\n      ctx.setValue(isPressed ? '' : value);\n    } else {\n      const arr = (ctx.value as string[]) ?? [];\n      ctx.setValue(isPressed ? arr.filter((v) => v !== value) : [...arr, value]);\n    }\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-pressed={isPressed}\n      data-state={isPressed ? 'on' : 'off'}\n      disabled={ctx.disabled || itemDisabled}\n      className={cx('toggle', `toggle--${ctx.size}`, `toggle--${ctx.variant}`, 'toggle-group__item', isPressed && 'is-pressed', className)}\n      onClick={onClick}\n      {...rest}\n    >\n      {icon}\n      {children}\n    </button>\n  );\n});\n\n/** Alias of `ToggleGroupItem` for use inside `SegmentedControl`. */\nexport const SegmentedControlItem = ToggleGroupItem;\n"]}

package/dist/chunk-5LSPN6Q6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Toggle.tsx"],"names":["React","Toggle","jsx","cx","ToggleGroupItem","jsxs"],"mappings":"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","file":"chunk-5LSPN6Q6.js","sourcesContent":["'use client';\nimport * as React from 'react';\nimport { cx } from '../utils/cx';\n\nexport type ToggleSize = 'sm' | 'md' | 'lg';\nexport type ToggleVariant = 'default' | 'outline';\n\nexport interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n}\n\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n  { pressed, defaultPressed, onPressedChange, size = 'md', variant = 'default', className, children, onClick, ...rest },\n  ref\n) {\n  const [internal, setInternal] = React.useState(defaultPressed ?? false);\n  const isControlled = pressed !== undefined;\n  const value = isControlled ? pressed : internal;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-pressed={value}\n      data-state={value ? 'on' : 'off'}\n      className={cx('toggle', `toggle--${size}`, `toggle--${variant}`, value && 'is-pressed', className)}\n      onClick={(e) => {\n        const next = !value;\n        if (!isControlled) setInternal(next);\n        onPressedChange?.(next);\n        onClick?.(e);\n      }}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n\ninterface ToggleGroupContextValue {\n  type: 'single' | 'multiple';\n  value: string | string[];\n  setValue: (next: string | string[]) => void;\n  size: ToggleSize;\n  variant: ToggleVariant;\n  disabled: boolean;\n}\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null);\n\ninterface ToggleGroupBaseProps {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  disabled?: boolean;\n  className?: string;\n  ariaLabel?: string;\n  children: React.ReactNode;\n}\n\nexport interface ToggleGroupSingleProps extends ToggleGroupBaseProps {\n  type: 'single';\n  value?: string | null;\n  defaultValue?: string;\n  onChange?: (value: string | null) => void;\n  rovingFocus?: boolean;\n}\n\nexport interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {\n  type: 'multiple';\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (value: string[]) => void;\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nexport function ToggleGroup(props: ToggleGroupProps) {\n  const { type, size = 'md', variant = 'default', disabled = false, className, ariaLabel, children } = props;\n\n  const initial: string | string[] =\n    type === 'single' ? (props.defaultValue ?? '') : (props.defaultValue ?? []);\n  const [internal, setInternal] = React.useState<string | string[]>(initial);\n\n  const isControlled = props.value !== undefined && props.value !== null;\n  const current: string | string[] = isControlled\n    ? type === 'single'\n      ? (props.value ?? '')\n      : (props.value ?? [])\n    : internal;\n\n  const setValue = (next: string | string[]) => {\n    if (!isControlled) setInternal(next);\n    if (type === 'single') {\n      const v = (next as string) || null;\n      (props as ToggleGroupSingleProps).onChange?.(v);\n    } else {\n      (props as ToggleGroupMultipleProps).onChange?.(next as string[]);\n    }\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={{ type, value: current, setValue, size, variant, disabled }}>\n      <div role=\"group\" aria-label={ariaLabel} className={cx('toggle-group', className)}>\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\n/**\n * `SegmentedControl` — a single-select `ToggleGroup` with equal-width\n * segments. The common case (view switcher, filter mode, on/off pair) is\n * `type=\"single\"`; this drops the discriminant so you can't trip the\n * cryptic union error from forgetting `type`. Use `SegmentedControlItem`\n * (alias of `ToggleGroupItem`) for the options.\n *\n *   <SegmentedControl value={view} onChange={setView} ariaLabel=\"Vista\">\n *     <SegmentedControlItem value=\"list\">Lista</SegmentedControlItem>\n *     <SegmentedControlItem value=\"grid\">Tarjetas</SegmentedControlItem>\n *   </SegmentedControl>\n */\nexport type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'>;\n\nexport function SegmentedControl({ className, ...rest }: SegmentedControlProps) {\n  return <ToggleGroup type=\"single\" className={cx('toggle-group--segmented', className)} {...rest} />;\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  value: string;\n  /**\n   * Optional leading icon, rendered before `children` and aligned via the\n   * toggle's built-in flex gap. Convenience for view switchers / segmented\n   * controls: `<SegmentedControlItem value=\"table\" icon={<Table />}>Tabla</…>`.\n   * For an **icon-only** segment, pass `icon` with no children and give the\n   * button an accessible name via `aria-label` (icons are decorative).\n   */\n  icon?: React.ReactNode;\n}\n\nexport const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(function ToggleGroupItem(\n  { value, className, children, icon, disabled: itemDisabled, ...rest },\n  ref\n) {\n  const ctx = React.useContext(ToggleGroupContext);\n  if (!ctx) throw new Error('ToggleGroupItem must be used inside ToggleGroup');\n  const isPressed =\n    ctx.type === 'single'\n      ? ctx.value === value\n      : Array.isArray(ctx.value) && ctx.value.includes(value);\n\n  const onClick = () => {\n    if (ctx.type === 'single') {\n      ctx.setValue(isPressed ? '' : value);\n    } else {\n      const arr = (ctx.value as string[]) ?? [];\n      ctx.setValue(isPressed ? arr.filter((v) => v !== value) : [...arr, value]);\n    }\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-pressed={isPressed}\n      data-state={isPressed ? 'on' : 'off'}\n      disabled={ctx.disabled || itemDisabled}\n      className={cx('toggle', `toggle--${ctx.size}`, `toggle--${ctx.variant}`, 'toggle-group__item', isPressed && 'is-pressed', className)}\n      onClick={onClick}\n      {...rest}\n    >\n      {icon}\n      {children}\n    </button>\n  );\n});\n\n/** Alias of `ToggleGroupItem` for use inside `SegmentedControl`. */\nexport const SegmentedControlItem = ToggleGroupItem;\n"]}