@deepfuture/dui-theme-default 0.0.1

package/components/sidebar.js

@@ -0,0 +1,90 @@
+import { css } from "lit";
+export const sidebarStyles = css `
+  /* ── Desktop Outer ── */
+
+  .DesktopOuter {
+    width: var(--sidebar-width);
+    transition: width var(--duration-normal) var(--ease-out-3);
+  }
+
+  :host([data-state="collapsed"][data-collapsible="offcanvas"]) .DesktopOuter {
+    width: 0;
+  }
+
+  :host([data-state="collapsed"][data-collapsible="icon"]) .DesktopOuter {
+    width: var(--sidebar-width-icon);
+  }
+
+  :host([data-variant="floating"]) .DesktopOuter {
+    width: calc(var(--sidebar-width) + var(--space-4));
+  }
+
+  :host([data-variant="floating"][data-state="collapsed"][data-collapsible="icon"])
+    .DesktopOuter {
+    width: calc(var(--sidebar-width-icon) + var(--space-4));
+  }
+
+  :host([data-variant="inset"]) .DesktopOuter {
+    width: calc(var(--sidebar-width) + var(--space-4));
+  }
+
+  :host([data-variant="inset"][data-state="collapsed"][data-collapsible="icon"])
+    .DesktopOuter {
+    width: calc(var(--sidebar-width-icon) + var(--space-4));
+  }
+
+  /* ── Desktop Inner ── */
+
+  .DesktopInner {
+    width: var(--sidebar-width);
+    background: var(--sidebar-bg);
+    color: var(--sidebar-fg);
+    transition-duration: var(--duration-normal);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  :host([data-side="left"][data-variant="sidebar"]) .DesktopInner {
+    border-right: var(--border-width-thin) solid var(--sidebar-border);
+  }
+
+  :host([data-side="right"][data-variant="sidebar"]) .DesktopInner {
+    border-left: var(--border-width-thin) solid var(--sidebar-border);
+  }
+
+  :host([data-variant="floating"]) .DesktopInner {
+    margin: var(--space-2);
+    border-radius: var(--radius-lg);
+    border: var(--border-width-thin) solid var(--sidebar-border);
+    box-shadow: var(--shadow-md);
+  }
+
+  :host([data-variant="inset"]) .DesktopInner {
+    margin: var(--space-2);
+  }
+
+  :host([data-state="collapsed"][data-collapsible="icon"]) .DesktopInner {
+    width: var(--sidebar-width-icon);
+  }
+
+  /* ── Backdrop ── */
+
+  .Backdrop {
+    background: black;
+    opacity: 0.2;
+  }
+
+  .Backdrop[data-starting-style],
+  .Backdrop[data-ending-style] {
+    opacity: 0;
+  }
+
+  /* ── Mobile Panel ── */
+
+  .MobilePanel {
+    width: var(--sidebar-width-mobile);
+    background: var(--sidebar-bg);
+    color: var(--sidebar-fg);
+    box-shadow: var(--shadow-lg);
+    transition: transform var(--duration-normal) var(--ease-out-3);
+  }
+`;

package/components/slider.d.ts

@@ -0,0 +1 @@
+export declare const sliderStyles: import("lit").CSSResult;

package/components/slider.js

@@ -0,0 +1,57 @@
+import { css } from "lit";
+export const sliderStyles = css `
+  :host {
+    --slider-track-height: var(--space-1_5);
+    --slider-thumb-size: var(--space-4_5);
+  }
+
+  [part="root"] {
+    height: var(--slider-thumb-size);
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+  }
+
+  [part="track"] {
+    height: var(--slider-track-height);
+    background: var(--muted);
+    border-radius: calc(var(--slider-track-height) / 2);
+  }
+
+  [part="indicator"] {
+    background: var(--primary);
+    border-radius: calc(var(--slider-track-height) / 2);
+    transition: width 50ms ease-out;
+  }
+
+  [part="root"][data-dragging] [part="indicator"] {
+    transition: none;
+  }
+
+  [part="thumb"] {
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    background: var(--background);
+    border: 2px solid var(--primary);
+    border-radius: 50%;
+    transition-duration: 50ms, var(--duration-fast);
+    transition-timing-function: ease-out, ease;
+  }
+
+  [part="root"][data-dragging] [part="thumb"] {
+    transition: box-shadow var(--duration-fast);
+  }
+
+  @media (hover: hover) {
+    [part="thumb"]:hover {
+      box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 20%, transparent);
+    }
+  }
+
+  [part="thumb"]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+`;

package/components/spinner.d.ts

@@ -0,0 +1 @@
+export declare const spinnerStyles: import("lit").CSSResult;

package/components/spinner.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+export const spinnerStyles = css `
+  :host {
+    --spinner-size: var(--component-height-xxs);
+    --spinner-color: currentColor;
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+    color: var(--spinner-color);
+  }
+
+  :host([size="md"]) {
+    --spinner-size: var(--component-height-sm);
+  }
+
+  :host([size="lg"]) {
+    --spinner-size: var(--component-height-xl);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part="svg"][data-rotate] {
+      animation-duration: 3s;
+    }
+  }
+`;

package/components/switch.d.ts

@@ -0,0 +1 @@
+export declare const switchStyles: import("lit").CSSResult;

package/components/switch.js

@@ -0,0 +1,69 @@
+import { css } from "lit";
+export const switchStyles = css `
+  :host {
+    --switch-width: var(--space-9);
+    --switch-height: var(--space-5);
+    --switch-thumb-size: var(--space-4);
+    --switch-thumb-offset: var(--space-0_5);
+    --track-inner: calc(var(--switch-width) - var(--switch-thumb-offset) * 2);
+    --switch-checked-offset: calc(var(--track-inner) - var(--switch-thumb-size));
+    gap: var(--space-2);
+  }
+
+  [part="root"] {
+    width: var(--switch-width);
+    height: var(--switch-height);
+    margin-block-start: calc(
+      (var(--line-height-normal) * 1em - var(--switch-height)) / 2
+    );
+    border-radius: calc(var(--switch-height) / 2);
+    outline: var(--border-width-thin) solid var(--input);
+    background: color-mix(in oklch, var(--input) 50%, transparent);
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="root"][data-checked] {
+    background: var(--primary);
+    outline-color: var(--primary);
+  }
+
+  [part="root"][data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  [part="root"][data-readonly] {
+    cursor: default;
+  }
+
+  [part="root"]:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  [part="root"][data-invalid] {
+    background: color-mix(in oklch, var(--destructive) 15%, transparent);
+    outline-color: color-mix(in oklch, var(--destructive) 70%, transparent);
+  }
+
+  [part="root"][data-invalid][data-checked] {
+    background: var(--destructive);
+  }
+
+  [part="thumb"] {
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+    border-radius: 50%;
+    outline: 1px solid transparent;
+    background: var(--primary);
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  [part="root"][data-checked] [part="thumb"] {
+    background: var(--primary-foreground);
+    outline-color: var(--primary-foreground);
+  }
+`;

package/components/tab.d.ts

@@ -0,0 +1 @@
+export declare const tabStyles: import("lit").CSSResult;

package/components/tab.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+export const tabStyles = css `
+  [part="tab"] {
+    color: var(--muted-foreground);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-snug);
+    font-weight: var(--font-weight-medium);
+    padding-inline: var(--space-2);
+    height: 2rem;
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="tab"][data-active] {
+    color: var(--foreground);
+  }
+
+  @media (hover: hover) {
+    [part="tab"]:hover:not([data-disabled]) {
+      color: var(--foreground);
+    }
+  }
+
+  [part="tab"]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+    border-radius: var(--radius-sm);
+    z-index: 1;
+  }
+
+  [part="tab"][data-disabled] {
+    opacity: 0.5;
+  }
+`;

package/components/tabs-indicator.d.ts

@@ -0,0 +1 @@
+export declare const tabsIndicatorStyles: import("lit").CSSResult;

package/components/tabs-indicator.js

@@ -0,0 +1,10 @@
+import { css } from "lit";
+export const tabsIndicatorStyles = css `
+  :host {
+    height: 1.5rem;
+    border-radius: var(--radius-sm);
+    background: var(--input);
+    transition-duration: 200ms;
+    transition-timing-function: var(--ease-in-out-3);
+  }
+`;

package/components/tabs-list.d.ts

@@ -0,0 +1 @@
+export declare const tabsListStyles: import("lit").CSSResult;

package/components/tabs-list.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+export const tabsListStyles = css `
+  [part="list"] {
+    padding-inline: 0;
+    gap: 0;
+  }
+
+  [part="list"][data-orientation="vertical"] {
+    box-shadow: inset -1px 0 var(--border);
+    padding-inline: 0;
+    padding-block: var(--space-1);
+  }
+`;

package/components/tabs-panel.d.ts

@@ -0,0 +1 @@
+export declare const tabsPanelStyles: import("lit").CSSResult;

package/components/tabs-panel.js

@@ -0,0 +1,13 @@
+import { css } from "lit";
+export const tabsPanelStyles = css `
+  [part="panel"] {
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="panel"]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+    border-radius: var(--radius-md);
+  }
+`;

package/components/tabs.d.ts

@@ -0,0 +1 @@
+export declare const tabsStyles: import("lit").CSSResult;

package/components/tabs.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const tabsStyles = css ``;

package/components/textarea.d.ts

@@ -0,0 +1 @@
+export declare const textareaStyles: import("lit").CSSResult;

package/components/textarea.js

@@ -0,0 +1,76 @@
+import { css } from "lit";
+export const textareaStyles = css `
+  :host {
+    --font-size: var(--font-size-sm);
+  }
+
+  [part="textarea"] {
+    padding: var(--space-2);
+    font-family: var(--font-sans);
+    font-size: var(--font-size);
+    line-height: var(--line-height-snug);
+    color: var(--foreground);
+    border: var(--border-width-thin) solid var(--input);
+    background: var(--input-bg);
+    border-radius: var(--radius-md);
+    transition-duration: var(--duration-fast);
+  }
+
+  [part="textarea"][data-resize="auto"] {
+    min-height: var(--component-height-md);
+  }
+
+  /* Scrollbar */
+  [part="textarea"] {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent) transparent;
+  }
+
+  [part="textarea"]::-webkit-scrollbar {
+    width: 0.5rem;
+  }
+
+  [part="textarea"]::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  [part="textarea"]::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+    border-radius: var(--radius-sm);
+    border: 0.125rem solid transparent;
+    background-clip: padding-box;
+  }
+
+  [part="textarea"]::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
+  }
+
+  [part="textarea"]::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  [part="textarea"]:focus-visible {
+    box-shadow:
+      0 0 0 var(--space-0_5) var(--background),
+      0 0 0 var(--space-1) var(--ring);
+  }
+
+  [part="textarea"]:disabled {
+    opacity: 0.5;
+  }
+
+  [part="textarea"][data-invalid] {
+    border-color: var(--destructive);
+  }
+
+  /* Ghost variant */
+  :host([variant="ghost"]) [part="textarea"] {
+    border-color: transparent;
+    background: transparent;
+    padding: 0;
+  }
+
+  :host([variant="ghost"]) [part="textarea"]:focus-visible {
+    box-shadow: none;
+  }
+`;

package/components/toggle-group.d.ts

@@ -0,0 +1 @@
+export declare const toggleGroupStyles: import("lit").CSSResult;

package/components/toggle-group.js

@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const toggleGroupStyles = css `
+  [part="root"] {
+    gap: var(--space-1);
+    border-radius: var(--radius-md);
+    background: var(--muted);
+    padding: var(--space-0_5);
+  }
+`;

package/components/toggle.d.ts

@@ -0,0 +1 @@
+export declare const toggleStyles: import("lit").CSSResult;

package/components/toggle.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+export const toggleStyles = css `
+  [part="root"] {
+    height: var(--space-9);
+    padding: 0 var(--space-2_5);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--muted-foreground);
+    transition-property: background, color;
+    transition-duration: var(--duration-fast);
+  }
+
+  @media (hover: hover) {
+    [part="root"]:hover:not(:disabled):not([data-pressed]) {
+      background: var(--muted);
+      color: var(--foreground);
+    }
+  }
+
+  [part="root"][data-pressed] {
+    background: var(--secondary);
+    color: var(--foreground);
+  }
+
+  [part="root"]:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  [part="root"]:disabled {
+    opacity: 0.5;
+  }
+`;

package/components/toolbar.d.ts

@@ -0,0 +1 @@
+export declare const toolbarStyles: import("lit").CSSResult;

package/components/toolbar.js

@@ -0,0 +1,49 @@
+import { css } from "lit";
+export const toolbarStyles = css `
+  /* ── Root ── */
+
+  [part="root"] {
+    column-gap: var(--space-2);
+  }
+
+  :host([inset]) [part="root"] {
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-2);
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+  }
+
+  :host([inset][has-button-left]) [part="root"] {
+    padding-left: var(--space-2);
+  }
+
+  :host([inset][has-button-right]) [part="root"] {
+    padding-right: var(--space-2);
+  }
+
+  /* ── Size variants ── */
+
+  :host([size="sm"]) [part="root"] {
+    height: var(--component-height-sm);
+  }
+
+  :host([size="md"]) [part="root"] {
+    height: var(--component-height-md);
+  }
+
+  :host([size="lg"]) [part="root"] {
+    height: var(--component-height-lg);
+  }
+
+  :host([size="xl"]) [part="root"] {
+    height: var(--component-height-xl);
+  }
+
+  /* ── Slot containers ── */
+
+  [part="left"],
+  [part="center"],
+  [part="right"] {
+    gap: var(--space-2);
+  }
+`;

package/components/tooltip-popup.d.ts

@@ -0,0 +1 @@
+export declare const tooltipPopupStyles: import("lit").CSSResult;

package/components/tooltip-popup.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const tooltipPopupStyles = css ``;

package/components/tooltip.d.ts

@@ -0,0 +1 @@
+export declare const tooltipStyles: import("lit").CSSResult;

package/components/tooltip.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const tooltipStyles = css ``;

package/components/trunc.d.ts

@@ -0,0 +1 @@
+export declare const truncStyles: import("lit").CSSResult;

package/components/trunc.js

@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const truncStyles = css `
+  [part="root"] {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-normal);
+    color: var(--foreground);
+  }
+`;

package/components/vstack.d.ts

@@ -0,0 +1 @@
+export declare const vstackStyles: import("lit").CSSResult;

package/components/vstack.js

@@ -0,0 +1,2 @@
+import { css } from "lit";
+export const vstackStyles = css ``;

package/index.d.ts

@@ -0,0 +1,82 @@
+import type { DuiTheme } from "@deepfuture/dui-core/apply-theme";
+export declare const defaultTheme: DuiTheme;
+export { themedBase } from "./base.js";
+export { accordionStyles } from "./components/accordion.js";
+export { accordionItemStyles } from "./components/accordion-item.js";
+export { buttonStyles } from "./components/button.js";
+export { switchStyles } from "./components/switch.js";
+export { badgeStyles } from "./components/badge.js";
+export { scrollAreaStyles } from "./components/scroll-area.js";
+export { comboboxStyles } from "./components/combobox.js";
+export { menuStyles } from "./components/menu.js";
+export { menuItemStyles } from "./components/menu-item.js";
+export { popoverStyles } from "./components/popover.js";
+export { popoverPopupStyles } from "./components/popover-popup.js";
+export { tooltipStyles } from "./components/tooltip.js";
+export { tooltipPopupStyles } from "./components/tooltip-popup.js";
+export { dialogStyles } from "./components/dialog.js";
+export { dialogPopupStyles } from "./components/dialog-popup.js";
+export { alertDialogStyles } from "./components/alert-dialog.js";
+export { alertDialogPopupStyles } from "./components/alert-dialog-popup.js";
+export { breadcrumbStyles } from "./components/breadcrumb.js";
+export { breadcrumbItemStyles } from "./components/breadcrumb-item.js";
+export { breadcrumbLinkStyles } from "./components/breadcrumb-link.js";
+export { breadcrumbPageStyles } from "./components/breadcrumb-page.js";
+export { breadcrumbSeparatorStyles } from "./components/breadcrumb-separator.js";
+export { breadcrumbEllipsisStyles } from "./components/breadcrumb-ellipsis.js";
+export { checkboxStyles } from "./components/checkbox.js";
+export { checkboxGroupStyles } from "./components/checkbox-group.js";
+export { collapsibleStyles } from "./components/collapsible.js";
+export { toolbarStyles } from "./components/toolbar.js";
+export { sliderStyles } from "./components/slider.js";
+export { spinnerStyles } from "./components/spinner.js";
+export { tabStyles } from "./components/tab.js";
+export { tabsStyles } from "./components/tabs.js";
+export { tabsIndicatorStyles } from "./components/tabs-indicator.js";
+export { tabsListStyles } from "./components/tabs-list.js";
+export { tabsPanelStyles } from "./components/tabs-panel.js";
+export { textareaStyles } from "./components/textarea.js";
+export { truncStyles } from "./components/trunc.js";
+export { centerStyles } from "./components/center.js";
+export { hstackStyles } from "./components/hstack.js";
+export { vstackStyles } from "./components/vstack.js";
+export { pageInsetStyles } from "./components/page-inset.js";
+export { linkStyles } from "./components/link.js";
+export { avatarStyles } from "./components/avatar.js";
+export { portalStyles } from "./components/portal.js";
+export { inputStyles } from "./components/input.js";
+export { radioStyles } from "./components/radio.js";
+export { radioGroupStyles } from "./components/radio-group.js";
+export { dropzoneStyles } from "./components/dropzone.js";
+export { selectStyles } from "./components/select.js";
+export { previewCardStyles } from "./components/preview-card.js";
+export { previewCardPopupStyles } from "./components/preview-card-popup.js";
+export { dataTableStyles } from "./components/data-table.js";
+export { commandStyles } from "./components/command.js";
+export { commandInputStyles } from "./components/command-input.js";
+export { commandItemStyles } from "./components/command-item.js";
+export { commandListStyles } from "./components/command-list.js";
+export { commandGroupStyles } from "./components/command-group.js";
+export { commandEmptyStyles } from "./components/command-empty.js";
+export { commandSeparatorStyles } from "./components/command-separator.js";
+export { commandShortcutStyles } from "./components/command-shortcut.js";
+export { sidebarProviderStyles } from "./components/sidebar-provider.js";
+export { sidebarStyles } from "./components/sidebar.js";
+export { sidebarTriggerStyles } from "./components/sidebar-trigger.js";
+export { sidebarContentStyles } from "./components/sidebar-content.js";
+export { sidebarHeaderStyles } from "./components/sidebar-header.js";
+export { sidebarFooterStyles } from "./components/sidebar-footer.js";
+export { sidebarGroupStyles } from "./components/sidebar-group.js";
+export { sidebarGroupLabelStyles } from "./components/sidebar-group-label.js";
+export { sidebarMenuStyles } from "./components/sidebar-menu.js";
+export { sidebarMenuItemStyles } from "./components/sidebar-menu-item.js";
+export { sidebarMenuButtonStyles } from "./components/sidebar-menu-button.js";
+export { sidebarSeparatorStyles } from "./components/sidebar-separator.js";
+export { sidebarInsetStyles } from "./components/sidebar-inset.js";
+export { separatorStyles } from "./components/separator.js";
+export { progressStyles } from "./components/progress.js";
+export { toggleStyles } from "./components/toggle.js";
+export { toggleGroupStyles } from "./components/toggle-group.js";
+export { numberFieldStyles } from "./components/number-field.js";
+export { menubarStyles } from "./components/menubar.js";
+export { calendarStyles } from "./components/calendar.js";