@kismet-ux/constellation 1.0.1 → 1.2.0

package/README.md

@@ -30,6 +30,8 @@ import '@kismet-ux/constellation/styles';
 import { Button } from '@kismet-ux/constellation/ui';
 ```
 
+**You only pay for what you render.** Each component ships its own stylesheet, imported by the component itself, so your bundler drops the CSS for everything you don't use — the same way it drops the JS. Importing `…/styles` gives you the tokens and reset (4.6 kB gzipped); each component adds its own on top.
+
 Installed, the SCSS is already compiled, so the two-file seam isn't available to you — retheme by overriding the custom properties *after* importing the stylesheet. Every token in the next section is fair game:
 
 ```css

package/dist/brand/Logo/logo.css

@@ -0,0 +1,68 @@
+.logo-module_logo__TydU0 {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.5em;
+  height: var(--logo-height, var(--size-4));
+  line-height: 1;
+}
+
+.logo-module_mark__wd5zo {
+  align-items: center;
+  aspect-ratio: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 100%;
+  justify-content: center;
+}
+.logo-module_mark__wd5zo svg {
+  height: 100%;
+  width: 100%;
+}
+
+.logo-module_mark-link__YaA78 {
+  fill: none;
+  opacity: 0.45;
+  stroke: var(--logo-mark, var(--primary-main));
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.25;
+}
+
+.logo-module_mark-star__42Uji,
+.logo-module_mark-star-dim__5fGBz,
+.logo-module_mark-star-lead__YKp62 {
+  fill: var(--logo-mark, var(--primary-main));
+}
+
+.logo-module_mark-star__42Uji {
+  opacity: 0.85;
+}
+
+.logo-module_mark-star-dim__5fGBz {
+  opacity: 0.55;
+}
+
+.logo-module_wordmark___KAG5 {
+  color: var(--logo-fill);
+  font-family: var(--font-sans);
+  font-size: calc(var(--logo-height, var(--size-4)) * 0.52);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  max-width: 24ch;
+  opacity: 1;
+  transition: max-width 0.2s ease, opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+div[data-state='collapsed'] .logo-module_wordmark___KAG5 {
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .logo-module_wordmark___KAG5 {
+    transition: none;
+  }
+}

package/dist/brand/Logo/logo.module.scss.js

@@ -1,4 +1,6 @@
-var s = {"logo":"logo-module_logo__JNon2","mark":"logo-module_mark__hFkmQ","mark-link":"logo-module_mark-link__uFFv5","mark-star":"logo-module_mark-star__hbpwu","mark-star-dim":"logo-module_mark-star-dim__8wZWz","mark-star-lead":"logo-module_mark-star-lead__AAWv4","wordmark":"logo-module_wordmark__GnfAC"};
+import './logo.css';
+
+var s = {"logo":"logo-module_logo__TydU0","mark":"logo-module_mark__wd5zo","mark-link":"logo-module_mark-link__YaA78","mark-star":"logo-module_mark-star__42Uji","mark-star-dim":"logo-module_mark-star-dim__5fGBz","mark-star-lead":"logo-module_mark-star-lead__YKp62","wordmark":"logo-module_wordmark___KAG5"};
 
 export { s as default };
 //# sourceMappingURL=logo.module.scss.js.map

package/dist/brand/Logo/logo.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"logo.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/form/Checkbox/checkbox.css

@@ -0,0 +1,124 @@
+.checkbox-module_theme-inherit__9-o7A {
+  --checkbox-theme-main: var(--inherit-main);
+  --checkbox-theme-contrast: var(--inherit-contrast);
+  --checkbox-theme-emphasis: var(--inherit-main);
+  --checkbox-theme-focus-visible: var(--inherit-focus-visible);
+  --checkbox-theme-outlined-border: var(--inherit-outlined-border);
+}
+
+.checkbox-module_theme-primary__zyuNX {
+  --checkbox-theme-main: var(--primary-main);
+  --checkbox-theme-contrast: var(--primary-contrast);
+  --checkbox-theme-emphasis: var(--primary-emphasis);
+  --checkbox-theme-focus-visible: var(--primary-focus-visible);
+  --checkbox-theme-outlined-border: var(--primary-outlined-border);
+}
+
+.checkbox-module_theme-secondary__JUYKr {
+  --checkbox-theme-main: var(--secondary-main);
+  --checkbox-theme-contrast: var(--secondary-contrast);
+  --checkbox-theme-emphasis: var(--secondary-emphasis);
+  --checkbox-theme-focus-visible: var(--secondary-focus-visible);
+  --checkbox-theme-outlined-border: var(--secondary-outlined-border);
+}
+
+.checkbox-module_theme-destructive__M8AgU {
+  --checkbox-theme-main: var(--destructive-main);
+  --checkbox-theme-contrast: var(--destructive-contrast);
+  --checkbox-theme-emphasis: var(--destructive-emphasis);
+  --checkbox-theme-focus-visible: var(--destructive-focus-visible);
+  --checkbox-theme-outlined-border: var(--destructive-outlined-border);
+}
+
+.checkbox-module_theme-warning__AKuuE {
+  --checkbox-theme-main: var(--warning-main);
+  --checkbox-theme-contrast: var(--warning-contrast);
+  --checkbox-theme-emphasis: var(--warning-emphasis);
+  --checkbox-theme-focus-visible: var(--warning-focus-visible);
+  --checkbox-theme-outlined-border: var(--warning-outlined-border);
+}
+
+.checkbox-module_theme-success__Mp45s {
+  --checkbox-theme-main: var(--success-main);
+  --checkbox-theme-contrast: var(--success-contrast);
+  --checkbox-theme-emphasis: var(--success-emphasis);
+  --checkbox-theme-focus-visible: var(--success-focus-visible);
+  --checkbox-theme-outlined-border: var(--success-outlined-border);
+}
+
+.checkbox-module_theme-info__Gdbcb {
+  --checkbox-theme-main: var(--info-main);
+  --checkbox-theme-contrast: var(--info-contrast);
+  --checkbox-theme-emphasis: var(--info-emphasis);
+  --checkbox-theme-focus-visible: var(--info-focus-visible);
+  --checkbox-theme-outlined-border: var(--info-outlined-border);
+}
+
+.checkbox-module_theme-slate__eMHDz {
+  --checkbox-theme-main: var(--slate-main);
+  --checkbox-theme-contrast: var(--slate-contrast);
+  --checkbox-theme-emphasis: var(--slate-emphasis);
+  --checkbox-theme-focus-visible: var(--slate-focus-visible);
+  --checkbox-theme-outlined-border: var(--slate-outlined-border);
+}
+
+.checkbox-module_checkbox__8YN87 {
+  --checkbox-theme-main: var(--primary-main);
+  --checkbox-theme-contrast: var(--primary-contrast);
+  --checkbox-theme-emphasis: var(--primary-emphasis);
+  --checkbox-theme-focus-visible: var(--primary-focus-visible);
+  --checkbox-theme-outlined-border: var(--primary-outlined-border);
+  align-items: center;
+  background-color: var(--background-elevation-2);
+  border: 1px solid var(--input-outlined-enabled-border);
+  border-radius: 4px;
+  box-shadow: var(--shadow-sm);
+  color: var(--text-primary);
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 1.125rem;
+  justify-content: center;
+  outline: none;
+  width: 1.125rem;
+}
+.checkbox-module_checkbox__8YN87[data-state=checked] {
+  background-color: var(--checkbox-theme-main);
+  border-color: var(--checkbox-theme-main);
+  color: var(--checkbox-theme-contrast);
+}
+.checkbox-module_checkbox__8YN87:focus-visible {
+  border-color: var(--checkbox-theme-emphasis);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkbox-theme-focus-visible) 20%, transparent);
+}
+.checkbox-module_checkbox__8YN87[aria-invalid=true] {
+  border-color: var(--destructive-emphasis);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive-focus-visible) 20%, transparent);
+}
+.checkbox-module_checkbox__8YN87:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.checkbox-module_checkbox__8YN87 .checkbox-module_indicator__RVW8h {
+  align-items: center;
+  color: currentColor;
+  display: flex;
+  justify-content: center;
+}
+.checkbox-module_checkbox__8YN87 .checkbox-module_icon__azmqw {
+  height: 1rem;
+  width: 1rem;
+}
+
+.checkbox-module_label__rVKGq {
+  cursor: pointer;
+  user-select: none;
+}
+.checkbox-module_label__rVKGq.checkbox-module_label--disabled__iHm0R {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.checkbox-module_helper-text__d0ZOs {
+  margin-left: calc(1.125rem + var(--size-1));
+}

package/dist/form/Checkbox/checkbox.js

@@ -1,12 +1,61 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Label } from '../Label/label.js';
-import { Typography } from '../../typography/Typography/typography.js';
 import cn from 'clsx';
-import { CheckIcon } from 'lucide-react';
+import '../Input/input.js';
+import '../../layout/Sidebar/sidebar-context.js';
 import * as React from 'react';
-import s from './checkbox.module.scss.js';
-import { Column } from '../../layout/Column/column.js';
+import '../../ui/Alert/alert-context.js';
+import '../../ui/Table/table-sort-context.js';
+import '../../layout/Skeleton/skeleton.css';
+import '../../navigation/Sheet/sheet.js';
+import '../../ui/Button/button.js';
+import '../../ui/Tooltip/tooltip.js';
+import { CheckIcon } from 'lucide-react';
+import '../../internal/slot.js';
+import '../../layout/Sidebar/sidebar-variants.js';
+import '../../layout/Sidebar/sidebar.css';
+import '../../layout/AppContent/app-content.css';
 import { Row } from '../../layout/Row/row.js';
+import '../../navigation/Link/link.js';
+import { Typography } from '../../typography/Typography/typography.js';
+import '../../layout/AppFooter/app-footer.css';
+import '../../navigation/Router/router-context.js';
+import '../../ui/Separator/separator.js';
+import 'react-dom';
+import '../../typography/TruncatedText/truncated-text.js';
+import '../../navigation/Breadcrumbs/breadcrumbs.css';
+import '../../navigation/DropdownMenu/dropdown-menu.js';
+import '../../ui/Avatar/avatar.js';
+import '../../user/UserInfo/user-info.css';
+import '../../navigation/NavUser/nav-user.css';
+import '../../ui/Alert/alert.js';
+import '../../ui/Alert/alert.css';
+import '../../ui/Chip/chip.js';
+import '../../ui/CodeBlock/code-block.js';
+import '../../ui/DevIndicator/dev-indicator.css';
+import '../../ui/Dialog/dialog.js';
+import '../../ui/EmptyState/empty-state.js';
+import '../../ui/Icon/icon.js';
+import '../../ui/List/list.js';
+import '../../ui/Pagination/pagination.js';
+import '../../ui/ProgressBar/progress-bar.js';
+import '../../ui/StatCard/stat-card.js';
+import '../../ui/StatusDot/status-dot.js';
+import '../../ui/StatusDot/status-dot-variants.js';
+import '../../ui/StepProgress/step-progress.js';
+import '../../ui/Switch/switch.js';
+import '../../ui/Table/table.js';
+import '../../ui/TableActionCell/table-action-cell.js';
+import '../../ui/TableToolbar/table-toolbar.js';
+import '../../ui/Toggle/toggle.js';
+import '../../ui/ToggleGroup/toggle-group.js';
+import '../../settings/AppearanceTabs/appearance-tabs.css';
+import '../../layout/AppSidebarHeader/app-sidebar-header.css';
+import '../../layout/Collapse/collapse.js';
+import { Column } from '../../layout/Column/column.js';
+import '../../layout/Container/container.js';
+import '../../layout/Grid/grid.js';
+import s from './checkbox.module.scss.js';
 
 const Checkbox = React.forwardRef(({ className, id, theme = 'primary', destructive = false, checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled, value = 'on', name, required, label, helperText, ['aria-invalid']: ariaInvalid, ['aria-describedby']: ariaDescribedBy, onClick, onKeyDown, ...props }, ref) => {
     const isControlled = controlledChecked !== undefined;

package/dist/form/Checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/form/Checkbox/checkbox.tsx"],"sourcesContent":["import { Label } from '@constellation/form/Label';\nimport { Column, Row } from '@constellation/layout';\nimport { type FormTheme } from '@constellation/types';\nimport { Typography } from '@constellation/typography/Typography';\nimport cn from 'clsx';\nimport { CheckIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './checkbox.module.scss';\n\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'value' | 'defaultValue' | 'defaultChecked'\n> {\n  theme?: FormTheme;\n  destructive?: boolean;\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n  value?: string;\n  name?: string;\n  required?: boolean;\n  /** Optional inline label rendered to the right of the checkbox and associated via htmlFor. */\n  label?: React.ReactNode;\n  /** Optional helper / validation text rendered beneath the checkbox + label row. */\n  helperText?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      id,\n      theme = 'primary',\n      destructive = false,\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      disabled,\n      value = 'on',\n      name,\n      required,\n      label,\n      helperText,\n      ['aria-invalid']: ariaInvalid,\n      ['aria-describedby']: ariaDescribedBy,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = React.useState<CheckedState>(defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const generatedId = React.useId();\n    const checkboxId = id ?? generatedId;\n    const helperId = helperText ? `${checkboxId}-helper` : undefined;\n    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;\n\n    const dataState =\n      checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n    const toggle = () => {\n      if (disabled) return;\n      const next = checked === 'indeterminate' ? true : !checked;\n      if (!isControlled) {\n        setInternalChecked(next);\n      }\n      onCheckedChange?.(next);\n    };\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (e.defaultPrevented) return;\n      toggle();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ') {\n        e.preventDefault();\n        toggle();\n      }\n    };\n\n    const button = (\n      <button\n        ref={ref}\n        id={checkboxId}\n        type={'button'}\n        role={'checkbox'}\n        aria-checked={checked === 'indeterminate' ? 'mixed' : checked}\n        aria-invalid={destructive ? 'true' : ariaInvalid}\n        aria-required={required}\n        aria-describedby={describedBy}\n        data-slot={'checkbox'}\n        data-state={dataState}\n        disabled={disabled}\n        className={cn(s.checkbox, s[`theme-${theme}`], className)}\n        {...props}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {checked ? (\n          <span data-slot={'checkbox-indicator'} className={s.indicator}>\n            <CheckIcon className={s.icon} />\n          </span>\n        ) : null}\n      </button>\n    );\n\n    // Match native <input type='checkbox'> form-submission semantics: an\n    // unchecked (or indeterminate) box is omitted entirely from the submission,\n    // not present-but-empty. Only emit the hidden input when actually checked.\n    const hiddenInput =\n      name && checked === true ? <input type={'hidden'} name={name} value={value} /> : null;\n\n    if (label === undefined && helperText === undefined) {\n      return (\n        <>\n          {button}\n          {hiddenInput}\n        </>\n      );\n    }\n\n    return (\n      <Column data-slot={'checkbox-field'} gap={1}>\n        <Row data-slot={'checkbox-row'} gap={1} align={'center'}>\n          {button}\n          {label !== undefined ? (\n            <Label\n              data-slot={'checkbox-label'}\n              htmlFor={checkboxId}\n              className={cn(s['label'], disabled && s['label--disabled'])}\n              theme={destructive ? 'destructive' : 'inherit'}\n            >\n              {label}\n            </Label>\n          ) : null}\n        </Row>\n        {helperText !== undefined ? (\n          <Typography\n            data-slot={'checkbox-helper-text'}\n            id={helperId}\n            variant={'caption'}\n            theme={destructive ? 'destructive' : 'muted'}\n            className={s['helper-text']}\n          >\n            {helperText}\n          </Typography>\n        ) : null}\n        {hiddenInput}\n      </Column>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/form/Checkbox/checkbox.tsx"],"sourcesContent":["import { Label } from '@constellation/form/Label';\nimport { Column, Row } from '@constellation/layout';\nimport { type FormTheme } from '@constellation/types';\nimport { Typography } from '@constellation/typography/Typography';\nimport cn from 'clsx';\nimport { CheckIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './checkbox.module.scss';\n\ntype CheckedState = boolean | 'indeterminate';\n\nexport interface CheckboxProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange' | 'value' | 'defaultValue' | 'defaultChecked'\n> {\n  theme?: FormTheme;\n  destructive?: boolean;\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n  value?: string;\n  name?: string;\n  required?: boolean;\n  /** Optional inline label rendered to the right of the checkbox and associated via htmlFor. */\n  label?: React.ReactNode;\n  /** Optional helper / validation text rendered beneath the checkbox + label row. */\n  helperText?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      id,\n      theme = 'primary',\n      destructive = false,\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      disabled,\n      value = 'on',\n      name,\n      required,\n      label,\n      helperText,\n      ['aria-invalid']: ariaInvalid,\n      ['aria-describedby']: ariaDescribedBy,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = React.useState<CheckedState>(defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const generatedId = React.useId();\n    const checkboxId = id ?? generatedId;\n    const helperId = helperText ? `${checkboxId}-helper` : undefined;\n    const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(' ') || undefined;\n\n    const dataState =\n      checked === 'indeterminate' ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n\n    const toggle = () => {\n      if (disabled) return;\n      const next = checked === 'indeterminate' ? true : !checked;\n      if (!isControlled) {\n        setInternalChecked(next);\n      }\n      onCheckedChange?.(next);\n    };\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (e.defaultPrevented) return;\n      toggle();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented) return;\n      if (e.key === ' ') {\n        e.preventDefault();\n        toggle();\n      }\n    };\n\n    const button = (\n      <button\n        ref={ref}\n        id={checkboxId}\n        type={'button'}\n        role={'checkbox'}\n        aria-checked={checked === 'indeterminate' ? 'mixed' : checked}\n        aria-invalid={destructive ? 'true' : ariaInvalid}\n        aria-required={required}\n        aria-describedby={describedBy}\n        data-slot={'checkbox'}\n        data-state={dataState}\n        disabled={disabled}\n        className={cn(s.checkbox, s[`theme-${theme}`], className)}\n        {...props}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {checked ? (\n          <span data-slot={'checkbox-indicator'} className={s.indicator}>\n            <CheckIcon className={s.icon} />\n          </span>\n        ) : null}\n      </button>\n    );\n\n    // Match native <input type='checkbox'> form-submission semantics: an\n    // unchecked (or indeterminate) box is omitted entirely from the submission,\n    // not present-but-empty. Only emit the hidden input when actually checked.\n    const hiddenInput =\n      name && checked === true ? <input type={'hidden'} name={name} value={value} /> : null;\n\n    if (label === undefined && helperText === undefined) {\n      return (\n        <>\n          {button}\n          {hiddenInput}\n        </>\n      );\n    }\n\n    return (\n      <Column data-slot={'checkbox-field'} gap={1}>\n        <Row data-slot={'checkbox-row'} gap={1} align={'center'}>\n          {button}\n          {label !== undefined ? (\n            <Label\n              data-slot={'checkbox-label'}\n              htmlFor={checkboxId}\n              className={cn(s['label'], disabled && s['label--disabled'])}\n              theme={destructive ? 'destructive' : 'inherit'}\n            >\n              {label}\n            </Label>\n          ) : null}\n        </Row>\n        {helperText !== undefined ? (\n          <Typography\n            data-slot={'checkbox-helper-text'}\n            id={helperId}\n            variant={'caption'}\n            theme={destructive ? 'destructive' : 'muted'}\n            className={s['helper-text']}\n          >\n            {helperText}\n          </Typography>\n        ) : null}\n        {hiddenInput}\n      </Column>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/form/Checkbox/checkbox.module.scss.js

@@ -1,4 +1,6 @@
-var s = {"theme-inherit":"checkbox-module_theme-inherit__C6Vro","theme-primary":"checkbox-module_theme-primary__AgTNt","theme-secondary":"checkbox-module_theme-secondary__J05hl","theme-destructive":"checkbox-module_theme-destructive__p72dr","theme-warning":"checkbox-module_theme-warning__xi20w","theme-success":"checkbox-module_theme-success__l3EdW","theme-info":"checkbox-module_theme-info__r4j29","theme-slate":"checkbox-module_theme-slate__-oru5","checkbox":"checkbox-module_checkbox__AK-jG","indicator":"checkbox-module_indicator__nSbkR","icon":"checkbox-module_icon__oy8pi","label":"checkbox-module_label__Vxoru","label--disabled":"checkbox-module_label--disabled__iH6YY","helper-text":"checkbox-module_helper-text__kVhvq"};
+import './checkbox.css';
+
+var s = {"theme-inherit":"checkbox-module_theme-inherit__9-o7A","theme-primary":"checkbox-module_theme-primary__zyuNX","theme-secondary":"checkbox-module_theme-secondary__JUYKr","theme-destructive":"checkbox-module_theme-destructive__M8AgU","theme-warning":"checkbox-module_theme-warning__AKuuE","theme-success":"checkbox-module_theme-success__Mp45s","theme-info":"checkbox-module_theme-info__Gdbcb","theme-slate":"checkbox-module_theme-slate__eMHDz","checkbox":"checkbox-module_checkbox__8YN87","indicator":"checkbox-module_indicator__RVW8h","icon":"checkbox-module_icon__azmqw","label":"checkbox-module_label__rVKGq","label--disabled":"checkbox-module_label--disabled__iHm0R","helper-text":"checkbox-module_helper-text__d0ZOs"};
 
 export { s as default };
 //# sourceMappingURL=checkbox.module.scss.js.map

package/dist/form/Checkbox/checkbox.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"checkbox.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/form/DatePicker/date-picker.css

@@ -0,0 +1,175 @@
+:root {
+  --datepicker-background: color-mix(
+    in srgb,
+    var(--background-default) 98%,
+    var(--background-contrast)
+  );
+  --datepicker-duration: 200ms;
+  --datepicker-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes date-picker-module_datepickerFadeIn__9vL75 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes date-picker-module_datepickerFadeOut__JZWqn {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.date-picker-module_trigger__ETBtS {
+  align-items: center;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: inherit;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+}
+.date-picker-module_trigger__ETBtS:focus-visible {
+  outline: none;
+}
+
+.date-picker-module_text-input__bJeCY {
+  min-width: 0;
+}
+
+.date-picker-module_trigger-icon__1hfj_ {
+  color: var(--action-active);
+  flex-shrink: 0;
+  height: 1rem;
+  opacity: 0.6;
+  width: 1rem;
+}
+
+.date-picker-module_content__ZZBe0 {
+  animation-duration: var(--datepicker-duration);
+  animation-fill-mode: both;
+  animation-timing-function: var(--datepicker-ease);
+  background-color: var(--datepicker-background);
+  border: 1px solid var(--divider);
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-elevation-6);
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  overflow: hidden;
+  padding: 0.5rem;
+  width: 17rem;
+  z-index: var(--z-popover);
+}
+.date-picker-module_content__ZZBe0[data-state=open] {
+  animation-name: date-picker-module_datepickerFadeIn__9vL75;
+}
+.date-picker-module_content__ZZBe0[data-state=closed] {
+  animation-name: date-picker-module_datepickerFadeOut__JZWqn;
+}
+.date-picker-module_content__ZZBe0[data-closing=true] {
+  animation-name: date-picker-module_datepickerFadeOut__JZWqn;
+  pointer-events: none;
+}
+.date-picker-module_content__ZZBe0[data-side=bottom] {
+  transform-origin: top;
+}
+.date-picker-module_content__ZZBe0[data-side=top] {
+  transform-origin: bottom;
+}
+
+.date-picker-module_header-trigger__1neop {
+  border: 1px solid var(--divider);
+  border-radius: 0.375rem;
+  font-size: 0.8rem;
+  gap: 0.125rem;
+  min-width: auto;
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  transition: border-color var(--datepicker-duration) var(--datepicker-ease), background-color var(--datepicker-duration) var(--datepicker-ease);
+}
+.date-picker-module_header-trigger__1neop:hover {
+  background-color: var(--action-hover);
+  border-color: var(--text-secondary);
+}
+.date-picker-module_header-trigger__1neop:focus {
+  border-color: var(--primary-main);
+}
+.date-picker-module_header-trigger__1neop svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+.date-picker-module_weekdays__b9C7m {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.date-picker-module_weekday__MhcvD {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0;
+  text-align: center;
+  user-select: none;
+}
+
+.date-picker-module_grid__cJ4ZT {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.date-picker-module_day__3KTf0 {
+  align-items: center;
+  aspect-ratio: 1/1;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  font-size: 0.8125rem;
+  justify-content: center;
+  padding: 0;
+  transition: background-color var(--datepicker-duration) var(--datepicker-ease), color var(--datepicker-duration) var(--datepicker-ease);
+  user-select: none;
+  width: 100%;
+}
+.date-picker-module_day__3KTf0:hover:not(:disabled):not(.date-picker-module_selected__JasbR) {
+  background-color: var(--action-hover);
+}
+.date-picker-module_day__3KTf0:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+  opacity: 0.5;
+}
+
+.date-picker-module_outside__amvmk {
+  color: var(--text-disabled);
+  opacity: 0.5;
+}
+
+.date-picker-module_today__nBKQf {
+  border: 1.5px solid var(--primary-main);
+}
+
+.date-picker-module_selected__JasbR {
+  background-color: var(--secondary-main);
+  color: var(--secondary-contrast);
+  font-weight: 600;
+}
+.date-picker-module_selected__JasbR:hover {
+  background-color: var(--secondary-main);
+}

package/dist/form/DatePicker/date-picker.js

@@ -3,15 +3,63 @@ import inputStyles from '../Input/input.module.scss.js';
 import { Label } from '../Label/label.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/select.js';
 import { useBreakpoint } from '../../hooks/use-mobile.js';
-import { Typography } from '../../typography/Typography/typography.js';
 import cn from 'clsx';
-import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import '../Input/input.js';
+import '../../layout/Sidebar/sidebar-context.js';
 import * as React from 'react';
+import '../../ui/Alert/alert-context.js';
+import '../../ui/Table/table-sort-context.js';
+import '../../layout/Skeleton/skeleton.css';
+import '../../navigation/Sheet/sheet.js';
+import { Button } from '../../ui/Button/button.js';
+import '../../ui/Tooltip/tooltip.js';
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import '../../internal/slot.js';
+import '../../layout/Sidebar/sidebar-variants.js';
+import '../../layout/Sidebar/sidebar.css';
+import '../../layout/AppContent/app-content.css';
+import { Row } from '../../layout/Row/row.js';
+import '../../navigation/Link/link.js';
+import { Typography } from '../../typography/Typography/typography.js';
+import '../../layout/AppFooter/app-footer.css';
+import '../../navigation/Router/router-context.js';
+import '../../ui/Separator/separator.js';
 import { createPortal } from 'react-dom';
+import '../../typography/TruncatedText/truncated-text.js';
+import '../../navigation/Breadcrumbs/breadcrumbs.css';
+import '../../navigation/DropdownMenu/dropdown-menu.js';
+import '../../ui/Avatar/avatar.js';
+import '../../user/UserInfo/user-info.css';
+import '../../navigation/NavUser/nav-user.css';
+import '../../ui/Alert/alert.js';
+import '../../ui/Alert/alert.css';
+import '../../ui/Chip/chip.js';
+import '../../ui/CodeBlock/code-block.js';
+import '../../ui/DevIndicator/dev-indicator.css';
+import '../../ui/Dialog/dialog.js';
+import '../../ui/EmptyState/empty-state.js';
+import '../../ui/Icon/icon.js';
+import '../../ui/List/list.js';
+import '../../ui/Pagination/pagination.js';
+import '../../ui/ProgressBar/progress-bar.js';
+import '../../ui/StatCard/stat-card.js';
+import '../../ui/StatusDot/status-dot.js';
+import '../../ui/StatusDot/status-dot-variants.js';
+import '../../ui/StepProgress/step-progress.js';
+import '../../ui/Switch/switch.js';
+import '../../ui/Table/table.js';
+import '../../ui/TableActionCell/table-action-cell.js';
+import '../../ui/TableToolbar/table-toolbar.js';
+import '../../ui/Toggle/toggle.js';
+import '../../ui/ToggleGroup/toggle-group.js';
+import '../../settings/AppearanceTabs/appearance-tabs.css';
+import '../../layout/AppSidebarHeader/app-sidebar-header.css';
+import '../../layout/Collapse/collapse.js';
+import '../../layout/Column/column.css';
+import '../../layout/Container/container.js';
+import '../../layout/Grid/grid.js';
 import s from './date-picker.module.scss.js';
 import { normalizeIsoValue, formatDisplayDate, parseDateValue, useCalendar, formatIso, formatDateValue, isDateWithinRange, maskDateInput } from './use-calendar.js';
-import { Row } from '../../layout/Row/row.js';
-import { Button } from '../../ui/Button/button.js';
 
 const ANIMATION_DURATION = 200;
 function DatePicker({ value: valueProp, defaultValue, onChange, label, helperText, error = false, disabled = false, sizeVariant, placeholder, min, max, required = false, id, className, name, }) {