@atelier-ui/react 0.1.12 → 0.2.0

package/src/lib/radio-group/{llm-radio-group.js.map → atl-radio-group.js.map}

@@ -1 +1 @@
-{"version":3,"file":"llm-radio-group.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/radio-group/llm-radio-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,MAAM,GAIP,MAAM,OAAO,CAAC;AAEf,OAAO,uBAAuB,CAAC;AAoC/B,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAyB;IACrE,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS;IACzB,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS;CACxB,CAAC,CAAC;AAkDH;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,GAAG,EAAE,EACV,aAAa,EACb,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,EAAE,EACT,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,EAAE,EACX,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACY;IACnB,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,yEAAyE;IACzE,2EAA2E;IAC3E,6DAA6D;IAC7D,MAAM,aAAa,GAAG,CAAC,KAAoC,EAAE,EAAE;QAC7D,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;QACxE,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;QACtE,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ;YAAE,OAAO;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAmB,qBAAqB,CAAC,IAAI,EAAE,CAClF,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QACtE,MAAM,KAAK,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;QAClE,MAAM,OAAO,GAAG,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QAC7E,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;QAC/B,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,aAAa,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,iBAAiB;QACjB,eAAe,WAAW,EAAE;QAC5B,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;YACL,KAAK;YACL,IAAI;YACJ,QAAQ;YACR,QAAQ;YACR,OAAO;YACP,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,aAAa,EAAE,CAAC,CAAC,CAAC;YAC7D,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS;SACxB,YAED,eACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,OAAO,EAClB,IAAI,EAAC,YAAY,kBACH,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,EACpC,SAAS,EAAE,aAAa,KACpB,IAAI,aAEP,QAAQ,EACR,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,eAAW,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,GACqB,CAC9B,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa;IAC3B,OAAO,UAAU,CAAC,iBAAiB,CAAC,CAAC;AACvC,CAAC","sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type KeyboardEvent,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\nimport type { LlmRadioGroupSpec } from '../spec';\nimport './llm-radio-group.css';\n\n/**\n * Interface for the RadioGroup context.\n */\nexport interface RadioGroupContextValue {\n  /**\n   * The currently selected value.\n   */\n  value: string;\n  /**\n   * The name of the radio group.\n   */\n  name: string;\n  /**\n   * Whether the entire radio group is disabled.\n   */\n  disabled: boolean;\n  /**\n   * Whether the entire radio group is read-only.\n   */\n  readOnly: boolean;\n  /**\n   * Whether the radio group is in an invalid state.\n   */\n  invalid: boolean;\n  /**\n   * Callback to select a value.\n   */\n  onSelect: (value: string) => void;\n  /**\n   * Callback triggered on blur.\n   */\n  onBlur: () => void;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({\n  value: '',\n  name: '',\n  disabled: false,\n  readOnly: false,\n  invalid: false,\n  onSelect: () => undefined,\n  onBlur: () => undefined,\n});\n\n/**\n * Properties for the LlmRadioGroup component.\n */\nexport interface LlmRadioGroupProps\n  extends Omit<InputHTMLAttributes<HTMLDivElement>, 'onChange'>,\n    LlmRadioGroupSpec {\n  /**\n   * The current value of the radio group.\n   */\n  value?: string;\n  /**\n   * Callback triggered when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The layout orientation of the radio group.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The name of the radio group, applied to all child radio buttons.\n   */\n  name?: string;\n  /**\n   * Whether the radio group is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the radio group is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Whether a value is required.\n   */\n  required?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The radio buttons to be rendered.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A group of radio buttons.\n */\nexport function LlmRadioGroup({\n  value = '',\n  onValueChange,\n  orientation = 'vertical',\n  name = '',\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  invalid = false,\n  required = false,\n  errors = [],\n  children,\n  className,\n  ...rest\n}: LlmRadioGroupProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  // Roving arrow-key navigation per the WAI-ARIA radiogroup pattern: Arrow\n  // Down/Right move to the next enabled radio, Up/Left to the previous, both\n  // wrapping, and the navigated radio is selected and focused.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled || readOnly) return;\n    const forward = event.key === 'ArrowDown' || event.key === 'ArrowRight';\n    const backward = event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n    if (!forward && !backward) return;\n    const radios = Array.from(\n      groupRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]') ?? []\n    ).filter((radio) => !radio.disabled);\n    if (radios.length === 0) return;\n    event.preventDefault();\n    const currentIdx = radios.findIndex((radio) => radio.value === value);\n    const start = currentIdx === -1 ? (forward ? -1 : 0) : currentIdx;\n    const nextIdx = (start + (forward ? 1 : -1) + radios.length) % radios.length;\n    const target = radios[nextIdx];\n    target.focus();\n    onValueChange?.(target.value);\n  };\n\n  const classes = [\n    'llm-radio-group',\n    `orientation-${orientation}`,\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        value,\n        name,\n        disabled,\n        readOnly,\n        invalid,\n        onSelect: (v) => !disabled && !readOnly && onValueChange?.(v),\n        onBlur: () => undefined,\n      }}\n    >\n      <div\n        ref={groupRef}\n        className={classes}\n        role=\"radiogroup\"\n        aria-invalid={invalid || undefined}\n        aria-required={required || undefined}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n        {errors.length > 0 && (\n          <div className=\"errors\" role=\"alert\" aria-live=\"polite\">\n            {errors.map((err, i) => (\n              <p key={i} className=\"error-message\">\n                {err}\n              </p>\n            ))}\n          </div>\n        )}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\nexport function useRadioGroup(): RadioGroupContextValue {\n  return useContext(RadioGroupContext);\n}\n"]}
+{"version":3,"file":"atl-radio-group.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/radio-group/atl-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type KeyboardEvent,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\nimport type { AtlRadioGroupSpec } from '../spec';\nimport './atl-radio-group.css';\n\n/**\n * Interface for the RadioGroup context.\n */\nexport interface RadioGroupContextValue {\n  /**\n   * The currently selected value.\n   */\n  value: string;\n  /**\n   * The name of the radio group.\n   */\n  name: string;\n  /**\n   * Whether the entire radio group is disabled.\n   */\n  disabled: boolean;\n  /**\n   * Whether the entire radio group is read-only.\n   */\n  readOnly: boolean;\n  /**\n   * Whether the radio group is in an invalid state.\n   */\n  invalid: boolean;\n  /**\n   * Callback to select a value.\n   */\n  onSelect: (value: string) => void;\n  /**\n   * Callback triggered on blur.\n   */\n  onBlur: () => void;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>({\n  value: '',\n  name: '',\n  disabled: false,\n  readOnly: false,\n  invalid: false,\n  onSelect: () => undefined,\n  onBlur: () => undefined,\n});\n\n/**\n * Properties for the AtlRadioGroup component.\n */\nexport interface AtlRadioGroupProps\n  extends Omit<InputHTMLAttributes<HTMLDivElement>, 'onChange'>,\n    AtlRadioGroupSpec {\n  /**\n   * The current value of the radio group.\n   */\n  value?: string;\n  /**\n   * Callback triggered when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The layout orientation of the radio group.\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The name of the radio group, applied to all child radio buttons.\n   */\n  name?: string;\n  /**\n   * Whether the radio group is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the radio group is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Whether a value is required.\n   */\n  required?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The radio buttons to be rendered.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A group of radio buttons.\n */\nexport function AtlRadioGroup({\n  value = '',\n  onValueChange,\n  orientation = 'vertical',\n  name = '',\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  invalid = false,\n  required = false,\n  errors = [],\n  children,\n  className,\n  ...rest\n}: AtlRadioGroupProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  // Roving arrow-key navigation per the WAI-ARIA radiogroup pattern: Arrow\n  // Down/Right move to the next enabled radio, Up/Left to the previous, both\n  // wrapping, and the navigated radio is selected and focused.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled || readOnly) return;\n    const forward = event.key === 'ArrowDown' || event.key === 'ArrowRight';\n    const backward = event.key === 'ArrowUp' || event.key === 'ArrowLeft';\n    if (!forward && !backward) return;\n    const radios = Array.from(\n      groupRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]') ?? []\n    ).filter((radio) => !radio.disabled);\n    if (radios.length === 0) return;\n    event.preventDefault();\n    const currentIdx = radios.findIndex((radio) => radio.value === value);\n    const start = currentIdx === -1 ? (forward ? -1 : 0) : currentIdx;\n    const nextIdx = (start + (forward ? 1 : -1) + radios.length) % radios.length;\n    const target = radios[nextIdx];\n    target.focus();\n    onValueChange?.(target.value);\n  };\n\n  const classes = [\n    'atl-radio-group',\n    `orientation-${orientation}`,\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <RadioGroupContext.Provider\n      value={{\n        value,\n        name,\n        disabled,\n        readOnly,\n        invalid,\n        onSelect: (v) => !disabled && !readOnly && onValueChange?.(v),\n        onBlur: () => undefined,\n      }}\n    >\n      <div\n        ref={groupRef}\n        className={classes}\n        role=\"radiogroup\"\n        aria-invalid={invalid || undefined}\n        aria-required={required || undefined}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n        {errors.length > 0 && (\n          <div className=\"errors\" role=\"alert\" aria-live=\"polite\">\n            {errors.map((err, i) => (\n              <p key={i} className=\"error-message\">\n                {err}\n              </p>\n            ))}\n          </div>\n        )}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n}\n\nexport function useRadioGroup(): RadioGroupContextValue {\n  return useContext(RadioGroupContext);\n}\n"]}

package/src/lib/select/{llm-select.css → atl-select.css}

@@ -1,11 +1,11 @@
-.llm-select {
+.atl-select {
   display: inline-block;
   position: relative;
   font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-md);
 }
 
-.llm-select label {
+.atl-select label {
   display: block;
   margin-bottom: var(--ui-spacing-2);
   font-size: var(--ui-font-size-sm);
@@ -14,13 +14,13 @@
 }
 
 /* Select wrapper — holds native select + arrow icon */
-.llm-select .select-wrapper {
+.atl-select .select-wrapper {
   position: relative;
   display: flex;
   align-items: center;
 }
 
-.llm-select select {
+.atl-select select {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -43,27 +43,27 @@
     background-color var(--ui-transition-fast);
 }
 
-.llm-select select:hover:not(:disabled) {
+.atl-select select:hover:not(:disabled) {
   border-color: var(--ui-color-input-border-hover);
 }
 
-.llm-select select:focus-visible {
+.atl-select select:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-ring);
   border-color: var(--ui-color-input-border-focus);
 }
 
-.llm-select select:disabled {
+.atl-select select:disabled {
   opacity: var(--ui-opacity-disabled);
   cursor: not-allowed;
 }
 
-.llm-select.is-invalid select {
+.atl-select.is-invalid select {
   border-color: var(--ui-color-input-border-invalid);
 }
 
 /* Arrow icon */
-.llm-select .select-arrow {
+.atl-select .select-arrow {
   position: absolute;
   inset-inline-end: var(--ui-spacing-4);
   pointer-events: none;
@@ -72,11 +72,11 @@
 }
 
 /* Error display */
-.llm-select .errors {
+.atl-select .errors {
   margin-top: var(--ui-spacing-2);
 }
 
-.llm-select .error-message {
+.atl-select .error-message {
   margin: 0;
   font-size: var(--ui-font-size-sm);
   color: var(--ui-color-error-text);

package/src/lib/select/{llm-select.d.ts → atl-select.d.ts}

@@ -1,10 +1,10 @@
 import { ReactNode, SelectHTMLAttributes, OptionHTMLAttributes } from 'react';
-import type { LlmSelectSpec, LlmOptionSpec } from '../spec';
-import './llm-select.css';
+import type { AtlSelectSpec, AtlOptionSpec } from '../spec';
+import './atl-select.css';
 /**
- * Properties for the LlmSelect component.
+ * Properties for the AtlSelect component.
  */
-export interface LlmSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'>, LlmSelectSpec {
+export interface AtlSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'>, AtlSelectSpec {
     /**
      * The current value of the select.
      */
@@ -37,11 +37,11 @@ export interface LlmSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElem
 /**
  * A select component for choosing an option from a list.
  */
-export declare function LlmSelect({ value, onValueChange, placeholder, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, label, children, className, id, ...rest }: LlmSelectProps): import("react").JSX.Element;
+export declare function AtlSelect({ value, onValueChange, placeholder, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, label, children, className, id, ...rest }: AtlSelectProps): import("react").JSX.Element;
 /**
- * Properties for the LlmOption component.
+ * Properties for the AtlOption component.
  */
-export interface LlmOptionProps extends OptionHTMLAttributes<HTMLOptionElement>, LlmOptionSpec {
+export interface AtlOptionProps extends OptionHTMLAttributes<HTMLOptionElement>, AtlOptionSpec {
     /**
      * The value of the option.
      */
@@ -52,7 +52,7 @@ export interface LlmOptionProps extends OptionHTMLAttributes<HTMLOptionElement>,
     children?: ReactNode;
 }
 /**
- * An individual option component for use within LlmSelect.
+ * An individual option component for use within AtlSelect.
  */
-export declare function LlmOption({ optionValue, children, ...rest }: LlmOptionProps): import("react").JSX.Element;
-//# sourceMappingURL=llm-select.d.ts.map
+export declare function AtlOption({ optionValue, children, ...rest }: AtlOptionProps): import("react").JSX.Element;
+//# sourceMappingURL=atl-select.d.ts.map

package/src/lib/select/{llm-select.d.ts.map → atl-select.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"llm-select.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/select/llm-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACd,MAAM,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EACzE,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAU,EACV,aAAa,EACb,WAAW,EACX,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,cAAc,+BAiDhB;AAED;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,aAAa;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAM3E"}
+{"version":3,"file":"atl-select.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/select/atl-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACd,MAAM,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EACzE,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAU,EACV,aAAa,EACb,WAAW,EACX,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,cAAc,+BAiDhB;AAED;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,aAAa;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAM3E"}

package/src/lib/select/{llm-select.js → atl-select.js}

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './llm-select.css';
+import './atl-select.css';
 /**
  * A select component for choosing an option from a list.
  */
-export function LlmSelect({ value = '', onValueChange, placeholder, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, label, children, className, id, ...rest }) {
+export function AtlSelect({ value = '', onValueChange, placeholder, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, label, children, className, id, ...rest }) {
     const readOnly = reactReadOnly ?? specReadOnly ?? false;
     const selectId = id || (label ? `select-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
     const classes = [
-        'llm-select',
+        'atl-select',
         invalid && 'is-invalid',
         disabled && 'is-disabled',
         readOnly && 'is-readonly',
@@ -18,9 +18,9 @@ export function LlmSelect({ value = '', onValueChange, placeholder, invalid = fa
     return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: selectId, children: label }), _jsxs("div", { className: "select-wrapper", children: [_jsxs("select", { id: selectId, value: value, onChange: (e) => onValueChange?.(e.target.value), disabled: disabled, required: required, "aria-invalid": invalid || undefined, ...rest, children: [placeholder && (_jsx("option", { value: "", disabled: true, hidden: true, children: placeholder })), children] }), _jsx("span", { className: "select-arrow", "aria-hidden": "true", children: "\u25BE" })] }), errors.length > 0 && (_jsx("div", { className: "errors", role: "alert", "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
 }
 /**
- * An individual option component for use within LlmSelect.
+ * An individual option component for use within AtlSelect.
  */
-export function LlmOption({ optionValue, children, ...rest }) {
+export function AtlOption({ optionValue, children, ...rest }) {
     return (_jsx("option", { value: optionValue, ...rest, children: children }));
 }
-//# sourceMappingURL=llm-select.js.map
+//# sourceMappingURL=atl-select.js.map

package/src/lib/select/{llm-select.js.map → atl-select.js.map}

@@ -1 +1 @@
-{"version":3,"file":"llm-select.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/select/llm-select.tsx"],"names":[],"mappings":";AAKA,OAAO,kBAAkB,CAAC;AAsC1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,aAAa,EACb,WAAW,EACX,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACQ;IACf,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,QAAQ,GACZ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnF,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,gBAAO,OAAO,EAAE,QAAQ,YAAG,KAAK,GAAS,EACnD,eAAK,SAAS,EAAC,gBAAgB,aAC7B,kBACE,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAChD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,KAC9B,IAAI,aAEP,WAAW,IAAI,CACd,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,MAAM,kBAC7B,WAAW,GACL,CACV,EACA,QAAQ,IACF,EACT,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,uBAE1C,IACH,EACL,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,eAAW,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAkBD;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAkB;IAC1E,OAAO,CACL,iBAAQ,KAAK,EAAE,WAAW,KAAM,IAAI,YACjC,QAAQ,GACF,CACV,CAAC;AACJ,CAAC","sourcesContent":["import { ReactNode, SelectHTMLAttributes, OptionHTMLAttributes } from 'react';\nimport type {\n  LlmSelectSpec,\n  LlmOptionSpec,\n} from '../spec';\nimport './llm-select.css';\n\n/**\n * Properties for the LlmSelect component.\n */\nexport interface LlmSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'>,\n    LlmSelectSpec {\n  /**\n   * The current value of the select.\n   */\n  value?: string;\n  /**\n   * Callback triggered when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * Placeholder text to display when no value is selected.\n   */\n  placeholder?: string;\n  /**\n   * Whether the select is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The label for the select.\n   */\n  label?: string;\n  /**\n   * Whether the select is read-only.\n   */\n  readOnly?: boolean;\n}\n\n/**\n * A select component for choosing an option from a list.\n */\nexport function LlmSelect({\n  value = '',\n  onValueChange,\n  placeholder,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  label,\n  children,\n  className,\n  id,\n  ...rest\n}: LlmSelectProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const selectId =\n    id || (label ? `select-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n  const classes = [\n    'llm-select',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes}>\n      {label && <label htmlFor={selectId}>{label}</label>}\n      <div className=\"select-wrapper\">\n        <select\n          id={selectId}\n          value={value}\n          onChange={(e) => onValueChange?.(e.target.value)}\n          disabled={disabled}\n          required={required}\n          aria-invalid={invalid || undefined}\n          {...rest}\n        >\n          {placeholder && (\n            <option value=\"\" disabled hidden>\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </select>\n        <span className=\"select-arrow\" aria-hidden=\"true\">\n          ▾\n        </span>\n      </div>\n      {errors.length > 0 && (\n        <div className=\"errors\" role=\"alert\" aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Properties for the LlmOption component.\n */\nexport interface LlmOptionProps\n  extends OptionHTMLAttributes<HTMLOptionElement>,\n    LlmOptionSpec {\n  /**\n   * The value of the option.\n   */\n  optionValue: string;\n  /**\n   * The content to be rendered inside the option.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An individual option component for use within LlmSelect.\n */\nexport function LlmOption({ optionValue, children, ...rest }: LlmOptionProps) {\n  return (\n    <option value={optionValue} {...rest}>\n      {children}\n    </option>\n  );\n}\n"]}
+{"version":3,"file":"atl-select.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/select/atl-select.tsx"],"names":[],"mappings":";AAKA,OAAO,kBAAkB,CAAC;AAsC1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,aAAa,EACb,WAAW,EACX,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACQ;IACf,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,QAAQ,GACZ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnF,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,gBAAO,OAAO,EAAE,QAAQ,YAAG,KAAK,GAAS,EACnD,eAAK,SAAS,EAAC,gBAAgB,aAC7B,kBACE,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAChD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,KAC9B,IAAI,aAEP,WAAW,IAAI,CACd,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,MAAM,kBAC7B,WAAW,GACL,CACV,EACA,QAAQ,IACF,EACT,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,uBAE1C,IACH,EACL,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,eAAW,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAkBD;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAkB;IAC1E,OAAO,CACL,iBAAQ,KAAK,EAAE,WAAW,KAAM,IAAI,YACjC,QAAQ,GACF,CACV,CAAC;AACJ,CAAC","sourcesContent":["import { ReactNode, SelectHTMLAttributes, OptionHTMLAttributes } from 'react';\nimport type {\n  AtlSelectSpec,\n  AtlOptionSpec,\n} from '../spec';\nimport './atl-select.css';\n\n/**\n * Properties for the AtlSelect component.\n */\nexport interface AtlSelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'>,\n    AtlSelectSpec {\n  /**\n   * The current value of the select.\n   */\n  value?: string;\n  /**\n   * Callback triggered when the value changes.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * Placeholder text to display when no value is selected.\n   */\n  placeholder?: string;\n  /**\n   * Whether the select is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * The label for the select.\n   */\n  label?: string;\n  /**\n   * Whether the select is read-only.\n   */\n  readOnly?: boolean;\n}\n\n/**\n * A select component for choosing an option from a list.\n */\nexport function AtlSelect({\n  value = '',\n  onValueChange,\n  placeholder,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  label,\n  children,\n  className,\n  id,\n  ...rest\n}: AtlSelectProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const selectId =\n    id || (label ? `select-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n  const classes = [\n    'atl-select',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    readOnly && 'is-readonly',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes}>\n      {label && <label htmlFor={selectId}>{label}</label>}\n      <div className=\"select-wrapper\">\n        <select\n          id={selectId}\n          value={value}\n          onChange={(e) => onValueChange?.(e.target.value)}\n          disabled={disabled}\n          required={required}\n          aria-invalid={invalid || undefined}\n          {...rest}\n        >\n          {placeholder && (\n            <option value=\"\" disabled hidden>\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </select>\n        <span className=\"select-arrow\" aria-hidden=\"true\">\n          ▾\n        </span>\n      </div>\n      {errors.length > 0 && (\n        <div className=\"errors\" role=\"alert\" aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * Properties for the AtlOption component.\n */\nexport interface AtlOptionProps\n  extends OptionHTMLAttributes<HTMLOptionElement>,\n    AtlOptionSpec {\n  /**\n   * The value of the option.\n   */\n  optionValue: string;\n  /**\n   * The content to be rendered inside the option.\n   */\n  children?: ReactNode;\n}\n\n/**\n * An individual option component for use within AtlSelect.\n */\nexport function AtlOption({ optionValue, children, ...rest }: AtlOptionProps) {\n  return (\n    <option value={optionValue} {...rest}>\n      {children}\n    </option>\n  );\n}\n"]}

package/src/lib/skeleton/{llm-skeleton.css → atl-skeleton.css}

@@ -1,4 +1,4 @@
-.llm-skeleton {
+.atl-skeleton {
   display: block;
   background: var(--ui-color-border);
   overflow: hidden;
@@ -6,22 +6,22 @@
 }
 
 /* Variant shapes */
-.llm-skeleton.variant-text {
+.atl-skeleton.variant-text {
   border-radius: var(--ui-radius-sm);
 }
 
-.llm-skeleton.variant-circular {
+.atl-skeleton.variant-circular {
   border-radius: var(--ui-radius-full, 9999px);
 }
 
-.llm-skeleton.variant-rectangular {
+.atl-skeleton.variant-rectangular {
   border-radius: var(--ui-radius-md);
 }
 
 /* Shimmer animation — uses currentColor-aware overlay so it reads on
  * both light and dark surfaces (was hardcoded white at 0.3 alpha,
  * which only showed on dark backgrounds). */
-.llm-skeleton.is-animated::after {
+.atl-skeleton.is-animated::after {
   content: '';
   position: absolute;
   inset: 0;
@@ -45,7 +45,7 @@
 
 /* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
-  .llm-skeleton.is-animated::after {
+  .atl-skeleton.is-animated::after {
     animation: none;
   }
 }

package/src/lib/skeleton/{llm-skeleton.d.ts → atl-skeleton.d.ts}

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { LlmSkeletonSpec } from '../spec';
-import './llm-skeleton.css';
+import type { AtlSkeletonSpec } from '../spec';
+import './atl-skeleton.css';
 /**
- * Properties for the LlmSkeleton component.
+ * Properties for the AtlSkeleton component.
  */
-export interface LlmSkeletonProps extends HTMLAttributes<HTMLDivElement>, LlmSkeletonSpec {
+export interface AtlSkeletonProps extends HTMLAttributes<HTMLDivElement>, AtlSkeletonSpec {
     /**
      * The visual style variant of the skeleton.
      */
@@ -25,5 +25,5 @@ export interface LlmSkeletonProps extends HTMLAttributes<HTMLDivElement>, LlmSke
 /**
  * A placeholder component used to represent content while it's loading.
  */
-export declare function LlmSkeleton({ variant, width, height, animated, className, style, ...rest }: LlmSkeletonProps): import("react").JSX.Element;
-//# sourceMappingURL=llm-skeleton.d.ts.map
+export declare function AtlSkeleton({ variant, width, height, animated, className, style, ...rest }: AtlSkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=atl-skeleton.d.ts.map

package/src/lib/skeleton/{llm-skeleton.d.ts.map → atl-skeleton.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"llm-skeleton.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/skeleton/llm-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,eAAe;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAgB,EAChB,KAAc,EACd,MAAM,EACN,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAMlB"}
+{"version":3,"file":"atl-skeleton.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/skeleton/atl-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,eAAe;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAgB,EAChB,KAAc,EACd,MAAM,EACN,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAMlB"}

package/src/lib/skeleton/{llm-skeleton.js → atl-skeleton.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import './llm-skeleton.css';
+import './atl-skeleton.css';
 function computeHeight(variant, width, height) {
     if (height)
         return height;
@@ -17,11 +17,11 @@ function computeHeight(variant, width, height) {
 /**
  * A placeholder component used to represent content while it's loading.
  */
-export function LlmSkeleton({ variant = 'text', width = '100%', height, animated = true, className, style, ...rest }) {
-    const classes = ['llm-skeleton', `variant-${variant}`, animated && 'is-animated', className]
+export function AtlSkeleton({ variant = 'text', width = '100%', height, animated = true, className, style, ...rest }) {
+    const classes = ['atl-skeleton', `variant-${variant}`, animated && 'is-animated', className]
         .filter(Boolean).join(' ');
     const computedHeight = computeHeight(variant, width, height);
     const inlineStyle = { ...style, width, height: computedHeight };
     return _jsx("div", { className: classes, style: inlineStyle, "aria-hidden": "true", ...rest });
 }
-//# sourceMappingURL=llm-skeleton.js.map
+//# sourceMappingURL=atl-skeleton.js.map

package/src/lib/skeleton/{llm-skeleton.js.map → atl-skeleton.js.map}

@@ -1 +1 @@
-{"version":3,"file":"llm-skeleton.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/skeleton/llm-skeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,oBAAoB,CAAC;AA0B5B,SAAS,aAAa,CAAC,OAAe,EAAE,KAAa,EAAE,MAAe;IACpE,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC;QACf,KAAK,UAAU;YACb,OAAO,KAAK,CAAC;QACf,KAAK,aAAa;YAChB,OAAO,OAAO,CAAC;QACjB;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,MAAM,EACd,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACU;IACjB,MAAM,OAAO,GAAG,CAAC,cAAc,EAAE,WAAW,OAAO,EAAE,EAAE,QAAQ,IAAI,aAAa,EAAE,SAAS,CAAC;SACzF,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAkB,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;IAC/E,OAAO,cAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,iBAAc,MAAM,KAAK,IAAI,GAAI,CAAC;AACtF,CAAC","sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport type { LlmSkeletonSpec } from '../spec';\nimport './llm-skeleton.css';\n\n/**\n * Properties for the LlmSkeleton component.\n */\nexport interface LlmSkeletonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    LlmSkeletonSpec {\n  /**\n   * The visual style variant of the skeleton.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  /**\n   * The width of the skeleton.\n   */\n  width?: string;\n  /**\n   * The height of the skeleton.\n   */\n  height?: string;\n  /**\n   * Whether the skeleton should be animated.\n   */\n  animated?: boolean;\n}\n\nfunction computeHeight(variant: string, width: string, height?: string): string {\n  if (height) return height;\n  switch (variant) {\n    case 'text':\n      return '1em';\n    case 'circular':\n      return width;\n    case 'rectangular':\n      return '100px';\n    default:\n      return '1em';\n  }\n}\n\n/**\n * A placeholder component used to represent content while it's loading.\n */\nexport function LlmSkeleton({\n  variant = 'text',\n  width = '100%',\n  height,\n  animated = true,\n  className,\n  style,\n  ...rest\n}: LlmSkeletonProps) {\n  const classes = ['llm-skeleton', `variant-${variant}`, animated && 'is-animated', className]\n    .filter(Boolean).join(' ');\n  const computedHeight = computeHeight(variant, width, height);\n  const inlineStyle: CSSProperties = { ...style, width, height: computedHeight };\n  return <div className={classes} style={inlineStyle} aria-hidden=\"true\" {...rest} />;\n}\n"]}
+{"version":3,"file":"atl-skeleton.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/skeleton/atl-skeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,oBAAoB,CAAC;AA0B5B,SAAS,aAAa,CAAC,OAAe,EAAE,KAAa,EAAE,MAAe;IACpE,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,MAAM;YACT,OAAO,KAAK,CAAC;QACf,KAAK,UAAU;YACb,OAAO,KAAK,CAAC;QACf,KAAK,aAAa;YAChB,OAAO,OAAO,CAAC;QACjB;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,MAAM,EACd,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACU;IACjB,MAAM,OAAO,GAAG,CAAC,cAAc,EAAE,WAAW,OAAO,EAAE,EAAE,QAAQ,IAAI,aAAa,EAAE,SAAS,CAAC;SACzF,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,cAAc,GAAG,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAkB,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;IAC/E,OAAO,cAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,iBAAc,MAAM,KAAK,IAAI,GAAI,CAAC;AACtF,CAAC","sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport type { AtlSkeletonSpec } from '../spec';\nimport './atl-skeleton.css';\n\n/**\n * Properties for the AtlSkeleton component.\n */\nexport interface AtlSkeletonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlSkeletonSpec {\n  /**\n   * The visual style variant of the skeleton.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  /**\n   * The width of the skeleton.\n   */\n  width?: string;\n  /**\n   * The height of the skeleton.\n   */\n  height?: string;\n  /**\n   * Whether the skeleton should be animated.\n   */\n  animated?: boolean;\n}\n\nfunction computeHeight(variant: string, width: string, height?: string): string {\n  if (height) return height;\n  switch (variant) {\n    case 'text':\n      return '1em';\n    case 'circular':\n      return width;\n    case 'rectangular':\n      return '100px';\n    default:\n      return '1em';\n  }\n}\n\n/**\n * A placeholder component used to represent content while it's loading.\n */\nexport function AtlSkeleton({\n  variant = 'text',\n  width = '100%',\n  height,\n  animated = true,\n  className,\n  style,\n  ...rest\n}: AtlSkeletonProps) {\n  const classes = ['atl-skeleton', `variant-${variant}`, animated && 'is-animated', className]\n    .filter(Boolean).join(' ');\n  const computedHeight = computeHeight(variant, width, height);\n  const inlineStyle: CSSProperties = { ...style, width, height: computedHeight };\n  return <div className={classes} style={inlineStyle} aria-hidden=\"true\" {...rest} />;\n}\n"]}