@accelint/design-toolkit 3.0.0 → 4.0.0

package/dist/components/accordion/styles.d.ts

@@ -51,6 +51,6 @@ declare const AccordionStyles: tailwind_variants.TVReturnType<{
     heading: string;
     trigger: string[];
     panel: string;
-}, undefined, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown>>;
 
 export { AccordionStyles, AccordionStylesDefaults };

package/dist/components/avatar/styles.d.ts

@@ -43,6 +43,6 @@ declare const AvatarStyles: tailwind_variants.TVReturnType<{
     image: string;
     fallback: string;
     content: string;
-}, undefined, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown>>;
 
 export { AvatarStyles };

package/dist/components/badge/styles.d.ts

@@ -27,6 +27,6 @@ declare const BadgeStyles: tailwind_variants.TVReturnType<{
         serious: string;
         critical: string;
     };
-}, undefined, string[], unknown, unknown, undefined>>;
+}, undefined, string[], unknown, unknown>>;
 
 export { BadgeStyles, BadgeStylesDefaults };

package/dist/components/button/styles.d.ts

@@ -45,7 +45,7 @@ declare const ButtonStyles: tailwind_variants.TVReturnType<{} | {
         icon: string[];
         floating: string[];
     };
-}, undefined, string[], unknown, unknown, undefined>>>;
+}, undefined, string[], unknown, unknown>>>;
 declare const LinkButtonStyles: tailwind_variants.TVReturnType<{} | {
     variant: {
         filled: tailwind_merge.ClassNameValue | {};
@@ -86,7 +86,7 @@ declare const LinkButtonStyles: tailwind_variants.TVReturnType<{} | {
         icon: string[];
         floating: string[];
     };
-}, undefined, string[], unknown, unknown, undefined>>>;
+}, undefined, string[], unknown, unknown>>>;
 declare const ToggleButtonStyles: tailwind_variants.TVReturnType<{
     variant: {
         filled: string[];
@@ -124,6 +124,6 @@ declare const ToggleButtonStyles: tailwind_variants.TVReturnType<{
         icon: string[];
         floating: string[];
     };
-}, undefined, string[], unknown, unknown, undefined>>>;
+}, undefined, string[], unknown, unknown>>>;
 
 export { ButtonStyles, ButtonStylesDefaults, LinkButtonStyles, ToggleButtonStyles };

package/dist/components/checkbox/styles.d.ts

@@ -49,6 +49,6 @@ declare const CheckboxStyles: tailwind_variants.TVReturnType<{
     checkbox: string[];
     control: string[];
     label: string[];
-}, undefined, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown>>;
 
 export { CheckboxStyles };

package/dist/components/chip/styles.d.ts

@@ -34,7 +34,7 @@ declare const BaseChipStyles: tailwind_variants.TVReturnType<{
 }, tailwind_variants.TVReturnType<unknown, {
     list: string;
     chip: string[];
-}, undefined, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown>>;
 declare const ChipStyles: tailwind_variants.TVReturnType<{
     variant: {
         advisory: {
@@ -102,7 +102,7 @@ declare const ChipStyles: tailwind_variants.TVReturnType<{
 }, tailwind_variants.TVReturnType<unknown, {
     list: string;
     chip: string[];
-}, undefined, unknown, unknown, undefined>>>;
+}, undefined, unknown, unknown>>>;
 declare const SelectableChipStyles: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
@@ -170,7 +170,7 @@ declare const SelectableChipStyles: tailwind_variants.TVReturnType<{
 }, tailwind_variants.TVReturnType<unknown, {
     list: string;
     chip: string[];
-}, undefined, unknown, unknown, undefined>>>;
+}, undefined, unknown, unknown>>>;
 declare const DeletableChipStyles: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
@@ -242,6 +242,6 @@ declare const DeletableChipStyles: tailwind_variants.TVReturnType<{
 }, tailwind_variants.TVReturnType<unknown, {
     list: string;
     chip: string[];
-}, undefined, unknown, unknown, undefined>>>;
+}, undefined, unknown, unknown>>>;
 
 export { BaseChipStyles, ChipStyles, ChipStylesDefaults, DeletableChipStyles, SelectableChipStyles };

package/dist/components/color-picker/styles.d.ts

@@ -37,6 +37,6 @@ declare const ColorPickerStyles: tailwind_variants.TVReturnType<{
     picker: string;
     item: string[];
     swatch: string;
-}, undefined, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown>>;
 
 export { ColorPickerStyles };

package/dist/components/combobox-field/styles.d.ts

@@ -4,12 +4,12 @@ import * as tailwind_merge from 'tailwind-merge';
 declare const ComboBoxStyles: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
+            description?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             label?: tailwind_merge.ClassNameValue;
             popover?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
             control?: tailwind_merge.ClassNameValue;
-            description?: tailwind_merge.ClassNameValue;
             field?: tailwind_merge.ClassNameValue;
             error?: tailwind_merge.ClassNameValue;
         };
@@ -17,12 +17,12 @@ declare const ComboBoxStyles: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_merge.ClassNameValue | {
+            description?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             label?: tailwind_merge.ClassNameValue;
             popover?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
             control?: tailwind_merge.ClassNameValue;
-            description?: tailwind_merge.ClassNameValue;
             field?: tailwind_merge.ClassNameValue;
             error?: tailwind_merge.ClassNameValue;
         };
@@ -39,12 +39,12 @@ declare const ComboBoxStyles: tailwind_variants.TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
+            description?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             label?: tailwind_merge.ClassNameValue;
             popover?: tailwind_merge.ClassNameValue;
             trigger?: tailwind_merge.ClassNameValue;
             control?: tailwind_merge.ClassNameValue;
-            description?: tailwind_merge.ClassNameValue;
             field?: tailwind_merge.ClassNameValue;
             error?: tailwind_merge.ClassNameValue;
         };

package/dist/components/date-field/index.d.ts

@@ -1,11 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DateValue } from '@internationalized/date';
 import { DateFieldProps } from './types.js';
-import 'react';
 import 'react-aria-components';
 import 'tailwind-variants';
 import './styles.js';
-import 'tailwind-merge';
 
 /**
  * DateField - A comprehensive date input component with segmented editing
@@ -51,6 +49,6 @@ import 'tailwind-merge';
  *   onChange={setSelectedDate}
  * />
  */
-declare function DateField<T extends DateValue>({ classNames, description: descriptionProp, errorMessage: errorMessageProp, isDisabled, isInvalid: isInvalidProp, isReadOnly, label, placeholder, slot, size, shortMonth, isRequired, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
+declare function DateField<T extends DateValue>({ classNames, description: descriptionProp, errorMessage: errorMessageProp, inputProps, label: labelProp, size, shortMonth, shouldForceLeadingZeros, isDisabled, isInvalid: isInvalidProp, isRequired, ...rest }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
 
 export { DateField };

package/dist/components/date-field/index.js

@@ -1,2 +1,2 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import A from'@accelint/icons/calendar';import {DateField,composeRenderProps,Text,FieldError,DateInput,DateSegment}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {DateFieldStyles}from'./styles.js';const{field:v,dateInput:E,dateInputContainer:C,icon:L,descriptionText:V,error:J,dateSegment:O}=DateFieldStyles(),U=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],k=({value:e,isFocused:r,isPlaceholder:a,placeholder:n,isReadOnly:i,shortMonth:l})=>{if(a)return n;let o=`${e}`;return !i&&r?o=o.padStart(2,"0"):l&&(o=U[(e??0)-1]),o},q=({segment:e,shortMonth:r,...a})=>e.type==="literal"&&e.text!==":"?jsx(Fragment,{}):jsx(DateSegment,{segment:e,className:O({}),...a,children:e.type==="month"?n=>jsx(k,{...n,shortMonth:r}):e.text}),z=({className:e,ref:r=null,size:a,...n})=>jsxs("div",{className:C({}),children:[a==="medium"?jsx(Icon,{className:L({}),children:jsx(A,{})}):null,jsx(DateInput,{...n,className:composeRenderProps(e,i=>E({className:i})),"data-size":a})]});function Q({classNames:e,description:r,errorMessage:a,isDisabled:n,isInvalid:i,isReadOnly:l,label:o,placeholder:B,slot:S,size:p="medium",shortMonth:g=true,isRequired:F,...h}){const D=a||null,u=p==="small";return jsx(DateField,{...h,isDisabled:n,isInvalid:i||(D?true:void 0),isReadOnly:l,slot:S,className:composeRenderProps(e?.field,s=>v({className:s})),children:({isDisabled:s,isInvalid:y})=>jsxs(Fragment,{children:[!u&&o&&jsx(Label,{className:e?.label,isDisabled:s,isRequired:F,children:o}),jsx(z,{className:e?.input,size:p,isInvalid:y,children:m=>jsx(q,{segment:m,shortMonth:g})}),r&&(!(u||i)||s)&&jsx(Text,{className:V({}),slot:"description",children:r}),jsx(FieldError,{className:composeRenderProps(e?.error,m=>J({className:m})),children:D})]})})}export{Q as DateField};//# sourceMappingURL=index.js.map
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import x from'@accelint/icons/calendar';import {DateField,composeRenderProps,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {DateFieldStyles,DateFieldStylesDefaults}from'./styles.js';const{field:q,label:D,control:B,input:G,segment:Y,description:Z,error:w}=DateFieldStyles(),z=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];function $({classNames:i,description:d,errorMessage:A,inputProps:b,label:s,size:n="medium",shortMonth:t=DateFieldStylesDefaults.shortMonth,shouldForceLeadingZeros:y=true,isDisabled:N,isInvalid:m,isRequired:u,...T}){const p=A||null,c=n==="small";return jsx(DateField,{...T,className:composeRenderProps(i?.field,r=>q({className:r,shortMonth:t})),shouldForceLeadingZeros:y,isDisabled:N,isInvalid:m||(p?true:void 0),isRequired:u,"aria-label":s,"data-size":n,children:({isDisabled:r})=>jsxs(Fragment,{children:[!c&&D&&jsx(Label,{className:D({className:i?.label,shortMonth:t}),isDisabled:r,isRequired:u,children:s}),jsxs("div",{className:B({className:i?.control,shortMonth:t}),children:[n==="medium"&&jsx(Icon,{children:jsx(x,{})}),jsx(DateInput,{...b,className:composeRenderProps(i?.input,a=>G({className:a,shortMonth:t})),children:a=>a.type==="literal"?jsx(Fragment,{children:a.text===":"?":":null}):jsx(DateSegment,{className:composeRenderProps(i?.segment,o=>Y({className:o,shortMonth:t})),segment:a,children:({placeholder:o,text:I,value:S,isFocused:g,isPlaceholder:v})=>v?o:a.type==="month"&&t&&!g?z[(S??0)-1]:I})})]}),d&&(!(c||m)||r)&&jsx(Text,{className:Z({className:i?.description,shortMonth:t}),slot:"description",children:d}),jsx(FieldError,{className:composeRenderProps(i?.error,a=>w({className:a,shortMonth:t})),children:p})]})})}export{$ as DateField};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/date-field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["dateInput","descriptionText","error","DateFieldStyles","R","value","isFocused","shortMonth","displayValue","isReadOnly","months","FormattedDateSegment","segment","jsx","DateSegment","t","c","dateSegment","DateInput","className","ref","props","jsxs","dateInputContainer","f","icon","d","classNames","isInvalidProp","isSmall","size","AriaDateField","field","isDisabled","isInvalid","label","Label","b","isRequired","AriaText","T","descriptionProp","errorMessage"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport Calendar from '@accelint/icons/calendar';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateSegment as TDateSegment } from '@react-stately/datepicker';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  type DateSegmentProps as AriaDateSegmentProps,\n  Text as AriaText,\n  DateSegment,\n  type DateSegmentRenderProps,\n  FieldError,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { DateFieldStyles } from './styles';\nimport type { DateFieldProps, DateInputProps } from './types';\n\nconst {\n  field,\n  dateInput,\n  dateInputContainer,\n  icon,\n  descriptionText,\n  error,\n  dateSegment,\n} = DateFieldStyles();\n\nconst months = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n];\n\nconst MonthDateSegment = ({\n  value,\n  isFocused,\n  isPlaceholder,\n  placeholder,\n  isReadOnly,\n  shortMonth,\n}: DateSegmentRenderProps & { shortMonth?: boolean }) => {\n  if (isPlaceholder) {\n    return placeholder;\n  }\n\n  let displayValue: string | undefined = `${value}`;\n\n  if (!isReadOnly && isFocused) {\n    displayValue = displayValue.padStart(2, '0');\n  } else if (shortMonth) {\n    displayValue = months[(value ?? 0) - 1];\n  }\n\n  return displayValue;\n};\n\ninterface FormattedDateSegmentProps extends AriaDateSegmentProps {\n  segment: TDateSegment;\n  shortMonth?: boolean;\n}\n\nconst FormattedDateSegment = ({\n  segment,\n  shortMonth,\n  ...props\n}: FormattedDateSegmentProps) => {\n  if (segment.type === 'literal' && segment.text !== ':') {\n    return <></>;\n  }\n\n  return (\n    <DateSegment segment={segment} className={dateSegment({})} {...props}>\n      {segment.type === 'month'\n        ? (renderProps) => (\n            <MonthDateSegment {...renderProps} shortMonth={shortMonth} />\n          )\n        : segment.text}\n    </DateSegment>\n  );\n};\n\nconst DateInput = ({\n  className,\n  ref = null,\n  size,\n  ...props\n}: DateInputProps) => {\n  return (\n    <div className={dateInputContainer({})}>\n      {size === 'medium' ? (\n        <Icon className={icon({})}>\n          <Calendar />\n        </Icon>\n      ) : null}\n      <AriaDateInput\n        {...props}\n        className={composeRenderProps(className, (className) =>\n          dateInput({\n            className,\n          }),\n        )}\n        data-size={size}\n      />\n    </div>\n  );\n};\n\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @example\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n *\n * @example\n * // Date field with validation\n * <DateField\n *   label=\"Event Date\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please select a valid date\"\n * />\n *\n * @example\n * // Date field with custom formatting\n * <DateField\n *   label=\"Meeting Date\"\n *   shortMonth={false}\n *   placeholder=\"Select meeting date\"\n * />\n *\n * @example\n * // Compact date field\n * <DateField\n *   label=\"Due Date\"\n *   size=\"small\"\n *   description=\"When is this task due?\"\n * />\n *\n * @example\n * // Controlled date field\n * <DateField\n *   label=\"Selected Date\"\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n * />\n */\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isReadOnly,\n  label,\n  placeholder,\n  slot,\n  size = 'medium',\n  shortMonth = true,\n  isRequired,\n  ...props\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...props}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isReadOnly={isReadOnly}\n      slot={slot}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className }),\n      )}\n    >\n      {(\n        { isDisabled, isInvalid }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && label && (\n            <Label\n              className={classNames?.label}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {label}\n            </Label>\n          )}\n          <DateInput\n            className={classNames?.input}\n            size={size}\n            isInvalid={isInvalid}\n          >\n            {(segment) => (\n              <FormattedDateSegment segment={segment} shortMonth={shortMonth} />\n            )}\n          </DateInput>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText className={descriptionText({})} slot='description'>\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaDateField>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["control","input","description","DateFieldStyles","O","classNames","shortMonth","DateFieldStylesDefaults","k","shouldForceLeadingZeros","isInvalidProp","isRequired","isSmall","size","AriaDateField","rest","E","className","field","l","isDisabled","label","Label","f","e","V","labelProp","F","jsx","AriaDateInput","composeRenderProps","L","Fragment","segmentProp","DateSegment","C","placeholder","isFocused","months","descriptionProp","AriaText","error"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport 'client-only';\nimport Calendar from '@accelint/icons/calendar';\nimport type { DateValue } from '@internationalized/date';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  DateSegment,\n  FieldError,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { DateFieldStyles, DateFieldStylesDefaults } from './styles';\nimport type { DateFieldProps } from './types';\n\nconst { field, label, control, input, segment, description, error } =\n  DateFieldStyles();\n\nconst months = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n];\n\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @example\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n *\n * @example\n * // Date field with validation\n * <DateField\n *   label=\"Event Date\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please select a valid date\"\n * />\n *\n * @example\n * // Date field with custom formatting\n * <DateField\n *   label=\"Meeting Date\"\n *   shortMonth={false}\n *   placeholder=\"Select meeting date\"\n * />\n *\n * @example\n * // Compact date field\n * <DateField\n *   label=\"Due Date\"\n *   size=\"small\"\n *   description=\"When is this task due?\"\n * />\n *\n * @example\n * // Controlled date field\n * <DateField\n *   label=\"Selected Date\"\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n * />\n */\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  inputProps,\n  label: labelProp,\n  size = 'medium',\n  shortMonth = DateFieldStylesDefaults.shortMonth,\n  shouldForceLeadingZeros = true,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  ...rest\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className, shortMonth }),\n      )}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && label && (\n            <Label\n              className={label({ className: classNames?.label, shortMonth })}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div\n            className={control({ className: classNames?.control, shortMonth })}\n          >\n            {size === 'medium' && (\n              <Icon>\n                <Calendar />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                input({\n                  className,\n                  shortMonth,\n                }),\n              )}\n            >\n              {(segmentProp) => {\n                // Remove extra space and punctuation from input display\n                if (segmentProp.type === 'literal') {\n                  return <>{segmentProp.text === ':' ? ':' : null}</>;\n                }\n\n                return (\n                  <DateSegment\n                    className={composeRenderProps(\n                      classNames?.segment,\n                      (className) => segment({ className, shortMonth }),\n                    )}\n                    segment={segmentProp}\n                  >\n                    {({\n                      placeholder,\n                      text,\n                      value,\n                      isFocused,\n                      isPlaceholder,\n                    }) => {\n                      if (isPlaceholder) {\n                        return placeholder;\n                      }\n\n                      return segmentProp.type === 'month' &&\n                        shortMonth &&\n                        !isFocused\n                        ? months[(value ?? 0) - 1]\n                        : text;\n                    }}\n                  </DateSegment>\n                );\n              }}\n            </AriaDateInput>\n          </div>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText\n              className={description({\n                className: classNames?.description,\n                shortMonth,\n              })}\n              slot='description'\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className, shortMonth }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaDateField>\n  );\n}\n"]}

package/dist/components/date-field/styles.d.ts

@@ -1,69 +1,59 @@
 import * as tailwind_variants from 'tailwind-variants';
-import * as tailwind_merge from 'tailwind-merge';
 
-declare const DateFieldStylesDefault: {
-    readonly size: "medium";
+declare const DateFieldStylesDefaults: {
+    readonly shortMonth: true;
 };
 declare const DateFieldStyles: tailwind_variants.TVReturnType<{
-    [key: string]: {
-        [key: string]: tailwind_merge.ClassNameValue | {
-            icon?: tailwind_merge.ClassNameValue;
-            field?: tailwind_merge.ClassNameValue;
-            error?: tailwind_merge.ClassNameValue;
-            dateInputContainer?: tailwind_merge.ClassNameValue;
-            dateSegment?: tailwind_merge.ClassNameValue;
-            dateInput?: tailwind_merge.ClassNameValue;
-            descriptionText?: tailwind_merge.ClassNameValue;
+    shortMonth: {
+        true: {
+            segment: string[];
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: tailwind_merge.ClassNameValue | {
-            icon?: tailwind_merge.ClassNameValue;
-            field?: tailwind_merge.ClassNameValue;
-            error?: tailwind_merge.ClassNameValue;
-            dateInputContainer?: tailwind_merge.ClassNameValue;
-            dateSegment?: tailwind_merge.ClassNameValue;
-            dateInput?: tailwind_merge.ClassNameValue;
-            descriptionText?: tailwind_merge.ClassNameValue;
+        false: {
+            segment: string[];
         };
     };
-} | {}, {
+}, {
     field: string;
-    dateInput: string[];
-    dateInputContainer: string;
-    icon: string[];
-    descriptionText: string[];
+    label: string;
+    control: string[];
+    input: string;
+    segment: string[];
+    description: string[];
     error: string;
-    dateSegment: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: tailwind_merge.ClassNameValue | {
-            icon?: tailwind_merge.ClassNameValue;
-            field?: tailwind_merge.ClassNameValue;
-            error?: tailwind_merge.ClassNameValue;
-            dateInputContainer?: tailwind_merge.ClassNameValue;
-            dateSegment?: tailwind_merge.ClassNameValue;
-            dateInput?: tailwind_merge.ClassNameValue;
-            descriptionText?: tailwind_merge.ClassNameValue;
+    shortMonth: {
+        true: {
+            segment: string[];
+        };
+        false: {
+            segment: string[];
         };
     };
-} | {}, {
+}, {
     field: string;
-    dateInput: string[];
-    dateInputContainer: string;
-    icon: string[];
-    descriptionText: string[];
+    label: string;
+    control: string[];
+    input: string;
+    segment: string[];
+    description: string[];
     error: string;
-    dateSegment: string;
-}, tailwind_variants.TVReturnType<unknown, {
+}, tailwind_variants.TVReturnType<{
+    shortMonth: {
+        true: {
+            segment: string[];
+        };
+        false: {
+            segment: string[];
+        };
+    };
+}, {
     field: string;
-    dateInput: string[];
-    dateInputContainer: string;
-    icon: string[];
-    descriptionText: string[];
+    label: string;
+    control: string[];
+    input: string;
+    segment: string[];
+    description: string[];
     error: string;
-    dateSegment: string;
 }, undefined, unknown, unknown, undefined>>;
 
-export { DateFieldStyles, DateFieldStylesDefault };
+export { DateFieldStyles, DateFieldStylesDefaults };

package/dist/components/date-field/styles.js

@@ -1,2 +1,2 @@
-import {tv}from'tailwind-variants';const t={size:"medium"},l=tv({slots:{field:"group/date-field flex flex-col gap-xs",dateInput:["group/date-field flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive","disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled","text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus-visible-within:outline-highlight","invalid:outline-serious","size-medium:pl-[32px] size-medium:text-body-s","size-small:text-body-xs"],dateInputContainer:"relative flex",icon:["-translate-y-1/2 absolute top-1/2 left-s text-default-light","group-disabled/date-field:text-disabled"],descriptionText:["fg-default-dark text-body-xs empty:hidden","group-disabled/date-field:fg-disabled"],error:"fg-serious text-body-xs empty:hidden",dateSegment:"focus-visible:bg-highlight focus-visible:text-inverse-light focus-visible:outline-none"},defaultVariants:t});export{l as DateFieldStyles,t as DateFieldStylesDefault};//# sourceMappingURL=styles.js.map
+import {tv}from'tailwind-variants';const t={shortMonth:true},l=tv({slots:{field:"group/date-field flex flex-col gap-xs",label:"",control:["flex w-full items-center gap-xs rounded-medium px-s py-xs font-display outline outline-interactive","group-size-medium/date-field:text-body-s","group-size-small/date-field:text-body-xs","text-default-light","hover:outline-interactive-hover","focus-visible-within:outline-highlight","group-invalid/date-field:outline-serious","group-disabled/date-field:text-disabled group-disabled/date-field:outline-interactive-disabled group-disabled/date-field:placeholder:text-disabled"],input:"flex gap-xs",segment:["text-right","placeholder-shown:text-default-dark","focus-visible:bg-highlight focus-visible:text-inverse-light focus-visible:outline-none"],description:["fg-default-dark text-body-xs","group-disabled/date-field:fg-disabled"],error:"fg-serious text-body-xs"},variants:{shortMonth:{true:{segment:["group-size-medium/date-field:type-month:w-[calc(3ch+(3*var(--typography-body-s-spacing)))]","group-size-small/date-field:type-month:w-[calc(3ch+(3*var(--typography-body-xs-spacing)))]"]},false:{segment:["group-size-medium/date-field:type-month:w-[calc(2ch+(2*var(--typography-body-s-spacing)))]","group-size-small/date-field:type-month:w-[calc(2ch+(2*var(--typography-body-xs-spacing)))]"]}}},defaultVariants:t});export{l as DateFieldStyles,t as DateFieldStylesDefaults};//# sourceMappingURL=styles.js.map
 //# sourceMappingURL=styles.js.map

package/dist/components/date-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/date-field/styles.ts"],"names":["DateFieldStylesDefault","DateFieldStyles","tv"],"mappings":"mCAcO,MAAMA,EAAyB,CACpC,IAAA,CAAM,QACR,CAAA,CAEaC,CAAAA,CAAkBC,GAAG,CAChC,KAAA,CAAO,CACL,KAAA,CAAO,uCAAA,CACP,UAAW,CACT,wGAAA,CACA,kGACA,yHAAA,CACA,yBAAA,CACA,gDACA,yBACF,CAAA,CACA,mBAAoB,eAAA,CACpB,IAAA,CAAM,CACJ,6DAAA,CACA,yCACF,EACA,eAAA,CAAiB,CACf,4CACA,uCACF,CAAA,CACA,MAAO,sCAAA,CACP,WAAA,CACE,wFACJ,CAAA,CACA,eAAA,CAAiBF,CACnB,CAAC","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from 'tailwind-variants';\n\nexport const DateFieldStylesDefault = {\n  size: 'medium',\n} as const;\n\nexport const DateFieldStyles = tv({\n  slots: {\n    field: 'group/date-field flex flex-col gap-xs',\n    dateInput: [\n      'group/date-field flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive',\n      'disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled',\n      'text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus-visible-within:outline-highlight',\n      'invalid:outline-serious',\n      'size-medium:pl-[32px] size-medium:text-body-s',\n      'size-small:text-body-xs',\n    ],\n    dateInputContainer: 'relative flex',\n    icon: [\n      '-translate-y-1/2 absolute top-1/2 left-s text-default-light',\n      'group-disabled/date-field:text-disabled',\n    ],\n    descriptionText: [\n      'fg-default-dark text-body-xs empty:hidden',\n      'group-disabled/date-field:fg-disabled',\n    ],\n    error: 'fg-serious text-body-xs empty:hidden',\n    dateSegment:\n      'focus-visible:bg-highlight focus-visible:text-inverse-light focus-visible:outline-none',\n  },\n  defaultVariants: DateFieldStylesDefault,\n});\n"]}
+{"version":3,"sources":["../../../src/components/date-field/styles.ts"],"names":["DateFieldStylesDefaults","DateFieldStyles","tv"],"mappings":"mCAcO,MAAMA,EAA0B,CACrC,UAAA,CAAY,IACd,CAAA,CAEaC,CAAAA,CAAkBC,EAAAA,CAAG,CAChC,KAAA,CAAO,CACL,KAAA,CAAO,uCAAA,CACP,KAAA,CAAO,EAAA,CACP,OAAA,CAAS,CACP,oGAAA,CACA,0CAAA,CACA,2CACA,oBAAA,CACA,iCAAA,CACA,wCAAA,CACA,0CAAA,CACA,oJACF,CAAA,CACA,KAAA,CAAO,aAAA,CACP,QAAS,CACP,YAAA,CACA,qCAAA,CACA,wFACF,CAAA,CACA,WAAA,CAAa,CACX,8BAAA,CACA,uCACF,CAAA,CACA,KAAA,CAAO,yBACT,CAAA,CACA,QAAA,CAAU,CACR,UAAA,CAAY,CACV,KAAM,CACJ,OAAA,CAAS,CACP,4FAAA,CACA,4FACF,CACF,CAAA,CACA,KAAA,CAAO,CACL,OAAA,CAAS,CACP,4FAAA,CACA,4FACF,CACF,CACF,CACF,CAAA,CACA,eAAA,CAAiBF,CACnB,CAAC","file":"styles.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { tv } from 'tailwind-variants';\n\nexport const DateFieldStylesDefaults = {\n  shortMonth: true,\n} as const;\n\nexport const DateFieldStyles = tv({\n  slots: {\n    field: 'group/date-field flex flex-col gap-xs',\n    label: '',\n    control: [\n      'flex w-full items-center gap-xs rounded-medium px-s py-xs font-display outline outline-interactive',\n      'group-size-medium/date-field:text-body-s',\n      'group-size-small/date-field:text-body-xs',\n      'text-default-light',\n      'hover:outline-interactive-hover',\n      'focus-visible-within:outline-highlight',\n      'group-invalid/date-field:outline-serious',\n      'group-disabled/date-field:text-disabled group-disabled/date-field:outline-interactive-disabled group-disabled/date-field:placeholder:text-disabled',\n    ],\n    input: 'flex gap-xs',\n    segment: [\n      'text-right',\n      'placeholder-shown:text-default-dark',\n      'focus-visible:bg-highlight focus-visible:text-inverse-light focus-visible:outline-none',\n    ],\n    description: [\n      'fg-default-dark text-body-xs',\n      'group-disabled/date-field:fg-disabled',\n    ],\n    error: 'fg-serious text-body-xs',\n  },\n  variants: {\n    shortMonth: {\n      true: {\n        segment: [\n          'group-size-medium/date-field:type-month:w-[calc(3ch+(3*var(--typography-body-s-spacing)))]',\n          'group-size-small/date-field:type-month:w-[calc(3ch+(3*var(--typography-body-xs-spacing)))]',\n        ],\n      },\n      false: {\n        segment: [\n          'group-size-medium/date-field:type-month:w-[calc(2ch+(2*var(--typography-body-s-spacing)))]',\n          'group-size-small/date-field:type-month:w-[calc(2ch+(2*var(--typography-body-xs-spacing)))]',\n        ],\n      },\n    },\n  },\n  defaultVariants: DateFieldStylesDefaults,\n});\n"]}

package/dist/components/date-field/types.d.ts

@@ -1,29 +1,26 @@
-import { ForwardedRef } from 'react';
-import { DateValue, DateFieldProps as DateFieldProps$1, DateInputProps as DateInputProps$1, LabelProps, FieldErrorProps } from 'react-aria-components';
+import { DateValue, DateFieldProps as DateFieldProps$1, LabelProps, DateInputProps, DateSegmentProps, FieldErrorProps } from 'react-aria-components';
 import { VariantProps } from 'tailwind-variants';
 import { DateFieldStyles } from './styles.js';
-import 'tailwind-merge';
 
-interface DateInputProps extends VariantProps<typeof DateFieldStyles>, Omit<DateInputProps$1, 'size'> {
-    ref?: ForwardedRef<HTMLDivElement>;
-    size?: 'small' | 'medium';
-    isInvalid?: boolean;
-}
-interface DateFieldProps<T extends DateValue> extends VariantProps<typeof DateFieldStyles>, Omit<DateFieldProps$1<T>, 'style' | 'className'>, Omit<DateInputProps$1, 'children' | 'style'> {
+type DateFieldProps<T extends DateValue> = Omit<DateFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & VariantProps<typeof DateFieldStyles> & {
     classNames?: {
         field?: DateFieldProps$1<T>['className'];
         label?: LabelProps['className'];
+        control?: string;
         input?: DateInputProps['className'];
+        segment?: DateSegmentProps['className'];
         description?: string;
         error?: FieldErrorProps['className'];
     };
-    size?: 'small' | 'medium';
+    label?: string;
     description?: string;
     errorMessage?: string;
-    label?: string;
-    placeholder?: string;
+    inputProps?: Omit<DateInputProps, 'children' | 'className'>;
+    /**
+     * When true, will convert month value to 3 letter abbreviation when not editing
+     */
     shortMonth?: boolean;
-    isRequired?: boolean;
-}
+    size?: 'small' | 'medium';
+};
 
-export type { DateFieldProps, DateInputProps };
+export type { DateFieldProps };

package/dist/components/details-list/styles.d.ts

@@ -60,6 +60,6 @@ declare const DetailsListStyles: tailwind_variants.TVReturnType<{
     list: string;
     label: string;
     value: string;
-}, undefined, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown>>;
 
 export { DetailsListStyles, DetailsListStylesDefaults };

package/dist/components/dialog/index.d.ts

@@ -1,21 +1,21 @@
-import * as react from 'react';
-import { RefObject, PropsWithChildren, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DialogTriggerProps, DialogRenderProps } from 'react-aria-components';
-import { ButtonProps } from '../button/types.js';
-import '../../lib/types.js';
-import 'tailwind-variants';
-import '../button/styles.js';
-import 'tailwind-merge';
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import { DialogTrigger, HeadingProps, ContextValue } from 'react-aria-components';
+import { DialogProps } from './types.js';
 
-type DialogSize = 'sm' | 'lg';
-interface DialogProps extends DialogTriggerProps {
-    size?: DialogSize;
-    isDismissable?: boolean;
-    isKeyboardDismissDisabled?: boolean;
-    isOpen?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-    parentRef?: RefObject<HTMLElement | null>;
+declare const DialogContext: react.Context<ContextValue<DialogProps, HTMLDivElement>>;
+declare function DialogTitle({ children, className }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare namespace DialogTitle {
+    var displayName: string;
+}
+declare function DialogContent({ children, className }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare namespace DialogContent {
+    var displayName: string;
+}
+declare function DialogFooter({ children, className }: ComponentProps<'footer'>): react_jsx_runtime.JSX.Element;
+declare namespace DialogFooter {
+    var displayName: string;
 }
 /**
  * Dialog - A modal dialog component for important content and interactions
@@ -26,9 +26,9 @@ interface DialogProps extends DialogTriggerProps {
  *
  * @example
  * // Basic dialog with trigger
- * <Dialog>
+ * <Dialog.Trigger>
  *   <Button>Open Dialog</Button>
- *   <Dialog.Body>
+ *   <Dialog>
  *     {({ close }) => (
  *       <>
  *         <Dialog.Title>Confirm Action</Dialog.Title>
@@ -38,26 +38,16 @@ interface DialogProps extends DialogTriggerProps {
  *         </Dialog.Footer>
  *       </>
  *     )}
- *   </Dialog.Body>
- * </Dialog>
+ *   </Dialog>
+ * </Dialog.Trigger>
  */
-declare const Dialog: {
-    ({ children, size, isOpen, onOpenChange, isDismissable, isKeyboardDismissDisabled, parentRef, }: DialogProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    Button: ({ children, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
-    Content: ({ children, className, }: PropsWithChildren<{
-        className?: string;
-    }>) => react_jsx_runtime.JSX.Element;
-    Footer: ({ children, className, }: PropsWithChildren<{
-        className?: string;
-    }>) => react_jsx_runtime.JSX.Element;
-    Title: ({ children, className, }: PropsWithChildren<{
-        className?: string;
-    }>) => react_jsx_runtime.JSX.Element;
-    Body: react.ForwardRefExoticComponent<DialogBodyProps & react.RefAttributes<HTMLDivElement>>;
-};
-interface DialogBodyProps {
-    children: ReactNode | ReactNode[] | ((opts: DialogRenderProps) => ReactNode);
+declare function Dialog({ ref, ...props }: DialogProps): react_jsx_runtime.JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+    var Trigger: typeof DialogTrigger;
+    var Title: typeof DialogTitle;
+    var Content: typeof DialogContent;
+    var Footer: typeof DialogFooter;
 }
 
-export { Dialog, type DialogProps };
+export { Dialog, DialogContext };

package/dist/components/dialog/index.js

@@ -1,2 +1,2 @@
-import {jsx}from'react/jsx-runtime';import {cn}from'./../../lib/utils.js';import {useIsSSR}from'@react-aria/ssr';import'client-only';import {cva}from'class-variance-authority';import {createContext,forwardRef,useState,useEffect,useContext}from'react';import {ModalOverlay,Modal,Dialog,DialogTrigger,Heading}from'react-aria-components';import {Button}from'../button/index.js';const M=cva("flex flex-col align-end font-light text-body-m text-default-dark",{variants:{size:{sm:"min-w-[280px] max-w-[280px] rounded-medium p-l",lg:"min-w-[320px] max-w-[720px] rounded-large p-xl"},defaultVariants:{size:"sm"}}}),E={sm:"small",lg:"medium"},b=createContext({size:"sm"}),r=()=>{const e=useContext(b);if(!e)throw new Error("Dialog components must be used within <Dialog>");return e},l=({children:e,size:t,isOpen:o,onOpenChange:i,isDismissable:a=true,isKeyboardDismissDisabled:m=true,parentRef:p})=>jsx(DialogTrigger,{children:jsx(b.Provider,{value:{size:t??"sm",isDismissable:a,isOpen:o,onOpenChange:i,parentRef:p,isKeyboardDismissDisabled:m},children:e})});l.displayName="Dialog";const x=forwardRef(({children:e,...t},o)=>{const{size:i,isDismissable:a,isOpen:m,onOpenChange:p,parentRef:c,isKeyboardDismissDisabled:y}=r(),d=useIsSSR(),[u,D]=useState(d?null:document.body);return useEffect(()=>{const f=c?.current,g=d?null:document.createElement("div");return f&&g&&(f.appendChild(g),D(g)),()=>{g?.remove(),D(d?null:document.body);}},[d,c]),u?jsx(ModalOverlay,{UNSTABLE_portalContainer:u,isKeyboardDismissDisabled:!a&&y,isOpen:m,onOpenChange:p,isDismissable:a,className:"absolute inset-0 flex items-center justify-center",...t,children:jsx(Modal,{ref:o,className:cn("flex flex-col justify-center bg-surface-overlay align-start",i==="sm"&&"rounded-medium",i==="lg"&&"rounded-large"),children:jsx(Dialog,{className:M({size:i}),children:e})})}):null});x.displayName="DialogBody";const H=({children:e,className:t})=>{const{size:o}=r();return jsx("div",{className:cn("flex flex-col",o==="sm"&&"gap-xs",o==="lg"&&"gap-l",t),children:e})},j=({children:e,className:t})=>{const{size:o}=r();return jsx(Heading,{slot:"title",className:cn("text-default-light",o==="sm"&&"mb-s text-header-m",o==="lg"&&"mb-m text-header-l",t),children:e})},K=({children:e,className:t,...o})=>{const{size:i}=r(),a=E[i];return jsx(Button,{size:a,...o,className:cn("pressed:bg-initial",t),children:e})},L=({children:e,className:t})=>{const{size:o}=r();return jsx("div",{className:cn("flex justify-end gap-xs",o==="sm"&&"mt-l",o==="lg"&&"mt-xl",t),children:e})};l.Button=K,l.Content=H,l.Footer=L,l.Title=j,l.Body=x;export{l as Dialog};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {isSlottedContextValue}from'./../../lib/utils.js';import {UNSAFE_PortalProvider}from'@react-aria/overlays';import {useIsSSR}from'@react-aria/ssr';import {createContext,useState,useEffect,useContext}from'react';import {useContextProps,ModalOverlay,composeRenderProps,Modal,Dialog,DialogTrigger,Heading,OverlayTriggerStateContext}from'react-aria-components';import {ButtonContext}from'../button/index.js';import {DialogStyles}from'./styles.js';const {overlay:h,modal:B,dialog:U,title:_,content:I,footer:L}=DialogStyles(),d=createContext(null);function g({children:e,className:o}){return jsx(Heading,{slot:"title",className:_({className:o}),children:e})}g.displayName="Dialog.Title";function f({children:e,className:o}){return jsx("div",{className:I({className:o}),children:e})}f.displayName="Dialog.Content";function P({children:e,className:o}){const a=useContext(d),s=(isSlottedContextValue(a)?null:a?.size)??"small",n=useContext(OverlayTriggerStateContext);return jsx("footer",{className:L({className:o}),children:jsx(ButtonContext.Provider,{value:{size:s,onPress:n?.close??(()=>{})},children:e})})}P.displayName="Dialog.Footer";function r({ref:e,...o}){[o,e]=useContextProps(o,e??null,d);const a=useIsSSR(),[s,n]=useState(a?null:document.body),{children:v,classNames:m,parentRef:c,size:C="small",...D}=o;return useEffect(()=>{const l=c?.current,i=a?null:document.createElement("div");return l&&i&&(l.appendChild(i),n(i)),()=>{i?.remove(),n(a?null:document.body);}},[a,c]),jsx(d.Provider,{value:o,children:jsx(UNSAFE_PortalProvider,{getContainer:()=>s,children:jsx(ModalOverlay,{...D,ref:e,className:composeRenderProps(m?.overlay,l=>h({className:l})),"data-size":C,children:jsx(Modal,{className:composeRenderProps(m?.modal,l=>B({className:l})),children:jsx(Dialog,{className:U({className:m?.dialog}),children:v})})})})})}r.displayName="Dialog",r.Trigger=DialogTrigger,r.Title=g,r.Content=f,r.Footer=P;export{r as Dialog,d as DialogContext};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/dialog/index.tsx"],"names":["useDialogContext","h","ctx","DialogContext","z","size","jsx","RACDialogTrigger","s","isDismissable","Dialog","rest","v","ref","useState","isSSR","N","node","P","port","setPortal","parentRef","RACModalOverlay","cn","n","O","children","DialogContent","S","dialogSize","buttonSize","buttonSizes","Button","w","DialogFooter","DialogTitle","DialogBody"],"mappings":"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","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\nimport { cn } from '@/lib/utils';\nimport { useIsSSR } from '@react-aria/ssr';\nimport 'client-only';\nimport { cva } from 'class-variance-authority';\nimport {\n  type PropsWithChildren,\n  type ReactNode,\n  type RefObject,\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  type DialogRenderProps,\n  type DialogTriggerProps,\n  Dialog as RACDialog,\n  DialogTrigger as RACDialogTrigger,\n  Heading as RACHeading,\n  Modal as RACModal,\n  ModalOverlay as RACModalOverlay,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport type { ButtonProps } from '../button/types';\n\nconst dialogClasses = cva(\n  'flex flex-col align-end font-light text-body-m text-default-dark',\n  {\n    variants: {\n      size: {\n        sm: 'min-w-[280px] max-w-[280px] rounded-medium p-l',\n        lg: 'min-w-[320px] max-w-[720px] rounded-large p-xl',\n      },\n      defaultVariants: {\n        size: 'sm',\n      },\n    },\n  },\n);\n\nconst buttonSizes: Record<string, ButtonProps['size']> = {\n  sm: 'small',\n  lg: 'medium',\n};\n\ntype DialogSize = 'sm' | 'lg';\n\ninterface DialogContextValue {\n  size: DialogSize;\n  isDismissable?: boolean;\n  isKeyboardDismissDisabled?: boolean;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  parentRef?: RefObject<HTMLElement | null>;\n}\n\nconst DialogContext = createContext<DialogContextValue>({ size: 'sm' });\n\nconst useDialogContext = () => {\n  const ctx = useContext(DialogContext);\n  if (!ctx) {\n    throw new Error('Dialog components must be used within <Dialog>');\n  }\n  return ctx;\n};\n\nexport interface DialogProps extends DialogTriggerProps {\n  size?: DialogSize;\n  isDismissable?: boolean;\n  isKeyboardDismissDisabled?: boolean;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  parentRef?: RefObject<HTMLElement | null>;\n}\n\n/**\n * Dialog - A modal dialog component for important content and interactions\n *\n * Provides accessible modal functionality with focus management, backdrop handling,\n * and keyboard navigation. Supports multiple sizes and customizable dismissal behavior.\n * Perfect for confirmations, forms, or any content requiring user focus.\n *\n * @example\n * // Basic dialog with trigger\n * <Dialog>\n *   <Button>Open Dialog</Button>\n *   <Dialog.Body>\n *     {({ close }) => (\n *       <>\n *         <Dialog.Title>Confirm Action</Dialog.Title>\n *         <p>Are you sure you want to continue?</p>\n *         <Dialog.Footer>\n *           <Dialog.Button onPress={close}>Confirm</Dialog.Button>\n *         </Dialog.Footer>\n *       </>\n *     )}\n *   </Dialog.Body>\n * </Dialog>\n */\nexport const Dialog = ({\n  children,\n  size,\n  isOpen,\n  onOpenChange,\n  isDismissable = true,\n  isKeyboardDismissDisabled = true,\n  parentRef,\n}: DialogProps) => {\n  return (\n    <RACDialogTrigger>\n      <DialogContext.Provider\n        value={{\n          size: size ?? 'sm',\n          isDismissable,\n          isOpen,\n          onOpenChange,\n          parentRef,\n          isKeyboardDismissDisabled,\n        }}\n      >\n        {children}\n      </DialogContext.Provider>\n    </RACDialogTrigger>\n  );\n};\nDialog.displayName = 'Dialog';\n\ninterface DialogBodyProps {\n  children: ReactNode | ReactNode[] | ((opts: DialogRenderProps) => ReactNode);\n}\n\nconst DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(\n  ({ children, ...rest }, ref) => {\n    const {\n      size,\n      isDismissable,\n      isOpen,\n      onOpenChange,\n      parentRef,\n      isKeyboardDismissDisabled,\n    } = useDialogContext();\n    const isSSR = useIsSSR();\n    const [portal, setPortal] = useState(isSSR ? null : document.body);\n\n    useEffect(() => {\n      const node = parentRef?.current;\n      /* Ensure proper ssr hydration TODO */\n      const port = isSSR ? null : document.createElement('div');\n\n      if (node && port) {\n        node.appendChild(port);\n        setPortal(port);\n      }\n\n      return () => {\n        port?.remove();\n\n        setPortal(isSSR ? null : document.body);\n      };\n    }, [isSSR, parentRef]);\n\n    return portal ? (\n      <RACModalOverlay\n        UNSTABLE_portalContainer={portal}\n        isKeyboardDismissDisabled={!isDismissable && isKeyboardDismissDisabled}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        isDismissable={isDismissable}\n        className='absolute inset-0 flex items-center justify-center'\n        {...rest}\n      >\n        <RACModal\n          ref={ref}\n          className={cn(\n            'flex flex-col justify-center bg-surface-overlay align-start',\n            size === 'sm' && 'rounded-medium',\n            size === 'lg' && 'rounded-large',\n          )}\n        >\n          <RACDialog className={dialogClasses({ size })}>{children}</RACDialog>\n        </RACModal>\n      </RACModalOverlay>\n    ) : null;\n  },\n);\nDialogBody.displayName = 'DialogBody';\n\nconst DialogContent = ({\n  children,\n  className,\n}: PropsWithChildren<{ className?: string }>) => {\n  const { size } = useDialogContext();\n  return (\n    <div\n      className={cn(\n        'flex flex-col',\n        size === 'sm' && 'gap-xs',\n        size === 'lg' && 'gap-l',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst DialogTitle = ({\n  children,\n  className,\n}: PropsWithChildren<{ className?: string }>) => {\n  const { size } = useDialogContext();\n  return (\n    <RACHeading\n      slot='title'\n      className={cn(\n        'text-default-light',\n        size === 'sm' && 'mb-s text-header-m',\n        size === 'lg' && 'mb-m text-header-l',\n        className,\n      )}\n    >\n      {children}\n    </RACHeading>\n  );\n};\n\nconst DialogButton = ({ children, className, ...props }: ButtonProps) => {\n  const { size: dialogSize } = useDialogContext();\n  const buttonSize = buttonSizes[dialogSize];\n  return (\n    <Button\n      size={buttonSize}\n      {...props}\n      //overriding the style to deal with rac's pressed state inherited\n      //from the trigger state\n      className={cn('pressed:bg-initial', className)}\n    >\n      {children}\n    </Button>\n  );\n};\n\nconst DialogFooter = ({\n  children,\n  className,\n}: PropsWithChildren<{ className?: string }>) => {\n  const { size } = useDialogContext();\n  return (\n    <div\n      className={cn(\n        'flex justify-end gap-xs',\n        size === 'sm' && 'mt-l',\n        size === 'lg' && 'mt-xl',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nDialog.Button = DialogButton;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Title = DialogTitle;\nDialog.Body = DialogBody;\n"]}
+{"version":3,"sources":["../../../src/components/dialog/index.tsx"],"names":["title","DialogStyles","DialogContext","DialogTitle","S","className","jsx","Heading","t","M","children","DialogContent","context","useContext","y","state","p","R","size","DialogFooter","props","ref","isSSR","useIsSSR","portal","x","E","classNames","parentRef","useEffect","node","T","port","setPortal","N","rest","composeRenderProps","modal","u","dialog","F","Dialog"],"mappings":"yfAwCwB,MAAA,CAAA,SAAQA,CAAAA,KAAO,CAAA,CAAA,CAAA,MAAS,CAAA,CAAA,CAAA,KAAWC,CAAa,EAE3DC,QACkD,CAAA,CAE/D,MAAA,CAAA,CAAA,CAASC,aAAY,EAAE,CAAA,CAAA,CAAAC,aAAA,CAAA,MAAU,SAAAC,CAAU,EAAiB,QAExDC,EAACC,CAAAA,SAAa,CAAA,CAAA,CAAA,CAAA,CAAA,OAAQC,GAAA,CAAAC,OAAA,CAAWT,CAAAA,YAAQK,CAAU,SAChD,CAAA,CAAA,CAAAK,CAAAA,SAIK,CAAA,CAAA,CAAA,CAAA,CAAA,QAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,YAEjBC,cAA0B,CAAA,SAAAN,CAAU,CAAA,CAA0B,QAC9DC,CAAAA,CAAC,UAAI,CAAA,CAAA,CAAA,CAAA,CAAA,OAAqBE,GAAA,CAAA,KAAA,CAAAH,CAAU,SAAK,CAAA,CAAA,CAAAK,UAEpC,CAAA,CAAA,CAAA,CAAA,CAAA,QAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,4BAEM,CAAA,SAAAL,CAAU,CAAA,CAA6B,QACjEO,CAAUC,EAAWX,SAEK,EAAI,CAAA,CAAA,CAAA,qBAAyB,CAAA,CAAA,CAAA,CAAAY,qBAAA,CAAA,CAAA,CACvDC,CAAAA,IAA6C,CAAA,CAEnD,SACG,OAAA,CAAA,CAAA,CAAOC,UAAA,CAAAC,0BAAA,CAAA,CAAA,OAAkBT,GAAE,CAAA,QAAA,CAAAH,CAAU,SACpC,CAAA,CAAA,CAAAC,UAAe,CAAA,CAAA,CAAd,CACC,CAAA,aACEY,aAAAA,CACA,QAASH,OAAO,CAAA,CAAA,IAAU,CAAA,CAAG,QAG9B,CAAA,CAAA,EAAA,KACH,GAKNI,iBAA2B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WA0BpB,CAAA,eAAgC,CAAgB,SACtBC,CAAAA,CAAOC,CAAAA,GAAO,CAAA,CAAA,CAAA,GAAmB,CAEhE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAMC,EAAQC,CAAAA,eAAS,CAAA,CACjB,CAACC,CAAAA,EAAiB,IAAaF,CAAAA,CAAQ,QAAO,CAAA,CAAAG,QAAA,EAAA,CAAS,CAAA,CAAA,CAAA,CAAI,EAC3DC,QAAE,CAAA,CAAA,CAAA,IAAA,CAAA,QAAU,CAAA,IAAA,CAAAC,CAAAA,CAAY,QAAA,CAAA,CAAAC,CAAAA,UAAkB,CAAA,CAAA,CAAA,SAAqBR,EAErE,CAAA,IAAA,CAAA,CAAAS,CAAAA,OACE,CAAA,GAAA,CAAMC,EAAOF,CAAAA,CAAAA,OAAWG,SAAA,CAElBC,IAAe,CAAA,kBAAgB,CAAA,CAAA,CAAA,CAAA,CAAA,IAAc,CAAA,QAEnD,CAAA,aACO,eAELC,GAAc,CAAA,iBAID,CAAA,CAEbA,CAAAA,CAAUX,EAAQ,CAAA,CAAA,CAAA,IAAO,CAAA,CAAA,EAAA,QAC3B,CACF,CAAA,CAAG,CAACA,MAGFhB,aAAC,EAAuB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOc,EAC7B,CAAA,CAAAZ,GAAA,CAAA,CAAA,CAAA,QAAuB,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,QAAoBgB,CACzChB,GAAA,CAAA0B,qBAAA,CAAA,CAAA,YACMC,CAAAA,KACCd,CAAAA,QACL,CAAAb,GAAA,CAAW4B,aAAmBT,CAAAA,GAAY,CAAA,CAAA,GAAA,CAAA,CAAUtB,iCACxCA,OAEZ,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,SAEA,CAAA,CAAA,CAAA,CAAA,CAAAC,CAAAA,WACE,CAAA,CAAA,CAAW8B,aAAuC/B,KAAAA,CAAAA,CAChDgC,SAAQ,CAAAC,kBAAA,CAAA,CAAAjC,EAAW,YAGrBC,SAAY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAWiC,QAAS,CAAA/B,GAAA,CAAAgC,MAAA,CAAWb,CAAAA,SAAoB,CAAA,CAC5D,CAAA,CAAA,SACH,EACF,EACF,MAKRc,EAAO,CAAA,QAAA,CAAA,CAAA,CAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACrBA,EAAO,CAAA,WACA,CAAA,SACA,CAAA,CAAA,OAAU9B,CACjB8B,cAAO,CAAA,CAAA,KAAStB,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,OAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,MAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { isSlottedContextValue } from '@/lib/utils';\nimport { UNSAFE_PortalProvider } from '@react-aria/overlays';\nimport { useIsSSR } from '@react-aria/ssr';\nimport {\n  type ComponentProps,\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  Dialog as AriaDialog,\n  type ContextValue,\n  DialogTrigger,\n  Heading,\n  type HeadingProps,\n  Modal,\n  ModalOverlay,\n  OverlayTriggerStateContext,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { ButtonContext } from '../button';\nimport { DialogStyles } from './styles';\nimport type { DialogProps } from './types';\n\nconst { overlay, modal, dialog, title, content, footer } = DialogStyles();\n\nexport const DialogContext =\n  createContext<ContextValue<DialogProps, HTMLDivElement>>(null);\n\nfunction DialogTitle({ children, className }: HeadingProps) {\n  return (\n    <Heading slot='title' className={title({ className })}>\n      {children}\n    </Heading>\n  );\n}\nDialogTitle.displayName = 'Dialog.Title';\n\nfunction DialogContent({ children, className }: ComponentProps<'div'>) {\n  return <div className={content({ className })}>{children}</div>;\n}\nDialogContent.displayName = 'Dialog.Content';\n\nfunction DialogFooter({ children, className }: ComponentProps<'footer'>) {\n  const context = useContext(DialogContext);\n  const size =\n    (isSlottedContextValue(context) ? null : context?.size) ?? 'small';\n  const state = useContext(OverlayTriggerStateContext);\n\n  return (\n    <footer className={footer({ className })}>\n      <ButtonContext.Provider\n        value={{\n          size,\n          onPress: state?.close ?? (() => undefined),\n        }}\n      >\n        {children}\n      </ButtonContext.Provider>\n    </footer>\n  );\n}\n\nDialogFooter.displayName = 'Dialog.Footer';\n\n/**\n * Dialog - A modal dialog component for important content and interactions\n *\n * Provides accessible modal functionality with focus management, backdrop handling,\n * and keyboard navigation. Supports multiple sizes and customizable dismissal behavior.\n * Perfect for confirmations, forms, or any content requiring user focus.\n *\n * @example\n * // Basic dialog with trigger\n * <Dialog.Trigger>\n *   <Button>Open Dialog</Button>\n *   <Dialog>\n *     {({ close }) => (\n *       <>\n *         <Dialog.Title>Confirm Action</Dialog.Title>\n *         <p>Are you sure you want to continue?</p>\n *         <Dialog.Footer>\n *           <Dialog.Button onPress={close}>Confirm</Dialog.Button>\n *         </Dialog.Footer>\n *       </>\n *     )}\n *   </Dialog>\n * </Dialog.Trigger>\n */\nexport function Dialog({ ref, ...props }: DialogProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DialogContext);\n\n  const isSSR = useIsSSR();\n  const [portal, setPortal] = useState(isSSR ? null : document.body);\n  const { children, classNames, parentRef, size = 'small', ...rest } = props;\n\n  useEffect(() => {\n    const node = parentRef?.current;\n    // TODO: Ensure proper ssr hydration\n    const port = isSSR ? null : document.createElement('div');\n\n    if (node && port) {\n      node.appendChild(port);\n\n      setPortal(port);\n    }\n\n    return () => {\n      port?.remove();\n\n      setPortal(isSSR ? null : document.body);\n    };\n  }, [isSSR, parentRef]);\n\n  return (\n    <DialogContext.Provider value={props}>\n      <UNSAFE_PortalProvider getContainer={() => portal}>\n        <ModalOverlay\n          {...rest}\n          ref={ref}\n          className={composeRenderProps(classNames?.overlay, (className) =>\n            overlay({ className }),\n          )}\n          data-size={size}\n        >\n          <Modal\n            className={composeRenderProps(classNames?.modal, (className) =>\n              modal({ className }),\n            )}\n          >\n            <AriaDialog className={dialog({ className: classNames?.dialog })}>\n              {children}\n            </AriaDialog>\n          </Modal>\n        </ModalOverlay>\n      </UNSAFE_PortalProvider>\n    </DialogContext.Provider>\n  );\n}\nDialog.displayName = 'Dialog';\nDialog.Trigger = DialogTrigger;\nDialog.Title = DialogTitle;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\n"]}