@warmio/ui 1.5.2 → 2.0.0

package/dist/entries/text.css

@@ -0,0 +1,97 @@
+/* ../ui/src/warmio/text/text.css */
+[data-text-variant=heading] {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  font-weight: 500;
+  line-height: 1.25;
+}
+[data-text-variant=heading][data-text-element=h1] {
+  display: block;
+  font-size: var(--type-size-display);
+}
+[data-text-variant=heading][data-text-element=h2] {
+  font-size: var(--type-size-display);
+}
+[data-text-variant=metric] {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--type-size-display);
+  line-height: 1.25;
+}
+[data-text-variant=body] {
+  font-size: var(--type-size-body);
+  line-height: 1.25;
+}
+[data-text-variant=body][data-text-size=large] {
+  font-size: var(--type-size-large);
+}
+[data-text-variant][data-text-size=display] {
+  font-size: var(--type-size-display);
+}
+[data-text-variant=caption] {
+  font-size: var(--type-size-caption);
+  line-height: 1.25;
+}
+[data-mono] {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+[data-text-tone=muted] {
+  color: var(--muted-foreground);
+}
+[data-text-tone=foreground] {
+  color: var(--foreground);
+}
+[data-text-tone=primary] {
+  color: var(--primary);
+}
+[data-text-tone=success] {
+  color: var(--success);
+}
+[data-text-tone=warning] {
+  color: var(--warning);
+}
+[data-text-tone=financeCash] {
+  color: var(--finance-cash);
+}
+[data-text-tone=financeDebt] {
+  color: var(--finance-debt);
+}
+[data-text-tone=financeInvestment] {
+  color: var(--finance-investment);
+}
+[data-text-align=start] {
+  text-align: left;
+}
+[data-text-align=center] {
+  text-align: center;
+}
+[data-text-align=end] {
+  text-align: right;
+}
+:where([data-numeric=true]) {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+[data-text-variant][data-text-numeric],
+[data-numeric=true] {
+  font-variant-numeric: tabular-nums;
+}
+[data-text-variant][data-text-truncate],
+[data-truncate=true] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+[data-text-line] {
+  display: block;
+}
+[data-presentation=dashboard][data-text-line=first],
+[data-presentation=welcome][data-text-line=second] {
+  color: var(--foreground);
+}
+[data-presentation=welcome][data-text-line=first],
+[data-presentation=dashboard][data-text-line=second] {
+  color: var(--muted-foreground);
+}

package/dist/index.js

@@ -1,14 +1,12 @@
+import "./entries/index.css";
 import {
   StackedDisplay,
   Text
-} from "./chunks/chunk-OU7YQUU2.js";
+} from "./chunks/chunk-W24JGQWM.js";
 import {
   Badge
-} from "./chunks/chunk-3AVFUXCV.js";
-import {
-  Button,
-  ButtonLink
-} from "./chunks/chunk-GY4XJ6EX.js";
+} from "./chunks/chunk-A2PN77YE.js";
+import "./chunks/chunk-U7D32UN3.js";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -21,18 +19,18 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunks/chunk-2CO2BZLI.js";
+} from "./chunks/chunk-MGX6ZL6Q.js";
 import {
   Logo,
   WarmBrandedLogoLink,
   WarmBrandedLogoMark,
   WarmBrandedLogoMarkStatic,
   WarmLogoIcon
-} from "./chunks/chunk-B47G2BJV.js";
+} from "./chunks/chunk-MVUHHKBL.js";
 import {
   ProductHeader,
   ProductHeaderBreadcrumb
-} from "./chunks/chunk-IK5RHPN3.js";
+} from "./chunks/chunk-DOOSH3V6.js";
 import {
   SheetClose,
   SheetContent,
@@ -41,7 +39,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunks/chunk-6V6K5G72.js";
+} from "./chunks/chunk-PJUNSOJK.js";
 import {
   Sidebar,
   SidebarAccountTrigger,
@@ -60,13 +58,17 @@ import {
   SidebarProvider,
   SidebarTrigger,
   useSidebar
-} from "./chunks/chunk-HQTC542T.js";
-import "./chunks/chunk-F74Y4WRX.js";
+} from "./chunks/chunk-FKGHMPVW.js";
+import {
+  Button,
+  ButtonLink
+} from "./chunks/chunk-L6L3GVGM.js";
+import "./chunks/chunk-DHV2A22F.js";
 import {
   Sheet
-} from "./chunks/chunk-A2NLFM6R.js";
-import "./chunks/chunk-JXSJTIX7.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-EIEA5RJJ.js";
+import "./chunks/chunk-RVVHR7RY.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   Badge,
   Button,

package/dist/logo.js

@@ -1,11 +1,11 @@
+import "./entries/logo.css";
 import {
   Logo,
   WarmBrandedLogoLink,
   WarmBrandedLogoMark,
   WarmBrandedLogoMarkStatic,
   WarmLogoIcon
-} from "./chunks/chunk-B47G2BJV.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-MVUHHKBL.js";
 export {
   Logo,
   WarmBrandedLogoLink,

package/dist/product-header.js

@@ -1,8 +1,8 @@
+import "./entries/product-header.css";
 import {
   ProductHeader,
   ProductHeaderBreadcrumb
-} from "./chunks/chunk-IK5RHPN3.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-DOOSH3V6.js";
 export {
   ProductHeader,
   ProductHeaderBreadcrumb

package/dist/sheet.js

@@ -1,3 +1,4 @@
+import "./entries/sheet.css";
 import {
   SheetClose,
   SheetContent,
@@ -6,12 +7,12 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunks/chunk-6V6K5G72.js";
+} from "./chunks/chunk-PJUNSOJK.js";
 import {
   Sheet
-} from "./chunks/chunk-A2NLFM6R.js";
-import "./chunks/chunk-JXSJTIX7.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-EIEA5RJJ.js";
+import "./chunks/chunk-RVVHR7RY.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   Sheet,
   SheetClose,

package/dist/sidebar.css

@@ -0,0 +1,129 @@
+[data-sidebar-navigation-collapsed] {
+  display: none;
+}
+
+@media (width >= 48rem) and (width < 80rem) {
+  [data-force-icon-at-tablet='true'] [data-sidebar-navigation-expanded] {
+    display: none;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-navigation-collapsed] {
+    display: block;
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='floating']
+    [data-slot='sidebar-gap'],
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='inset']
+    [data-slot='sidebar-gap'] {
+    width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
+    transition: width var(--motion-duration-slow) linear;
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='floating']
+    [data-slot='sidebar-container'],
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='inset']
+    [data-slot='sidebar-container'] {
+    width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
+    padding: calc(var(--spacing) * 4);
+    transition: width var(--motion-duration-slow) linear;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-content'] {
+    overflow: hidden;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-group'] {
+    align-items: center;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-group-label'] {
+    display: none;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-menu'] {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-menu-item'] {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']:not([data-presentation='sidebarIcon']) {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    margin-inline: auto;
+    justify-content: center;
+    gap: 0;
+    padding: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']
+    > span:not([aria-hidden='true']),
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']
+    [data-slot='sidebar-account-label'],
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']
+    [data-slot='sidebar-account-email'],
+  [data-force-icon-at-tablet='true'] [data-sidebar-account-chevron],
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-menu-badge'] {
+    display: none;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-brand'] {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-brand-mark] {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-brand-mark] > :first-child {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    opacity: 0;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-brand-collapsed] {
+    display: flex;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-utility-controls] {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-account-collapsed] {
+    display: flex;
+    justify-content: center;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-account-expanded] {
+    display: none;
+  }
+}
+
+[data-visually-hidden] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}

package/dist/sidebar.js

@@ -1,3 +1,4 @@
+import "./entries/sidebar.css";
 import {
   Sidebar,
   SidebarAccountTrigger,
@@ -16,11 +17,12 @@ import {
   SidebarProvider,
   SidebarTrigger,
   useSidebar
-} from "./chunks/chunk-HQTC542T.js";
-import "./chunks/chunk-F74Y4WRX.js";
-import "./chunks/chunk-A2NLFM6R.js";
-import "./chunks/chunk-JXSJTIX7.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-FKGHMPVW.js";
+import "./chunks/chunk-L6L3GVGM.js";
+import "./chunks/chunk-DHV2A22F.js";
+import "./chunks/chunk-EIEA5RJJ.js";
+import "./chunks/chunk-RVVHR7RY.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   Sidebar,
   SidebarAccountTrigger,

package/dist/text.css

@@ -0,0 +1,121 @@
+[data-text-variant='heading'] {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+[data-text-variant='heading'][data-text-element='h1'] {
+  display: block;
+  font-size: var(--type-size-display);
+}
+
+[data-text-variant='heading'][data-text-element='h2'] {
+  font-size: var(--type-size-display);
+}
+
+[data-text-variant='metric'] {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--type-size-display);
+  line-height: 1.25;
+}
+
+[data-text-variant='body'] {
+  font-size: var(--type-size-body);
+  line-height: 1.25;
+}
+
+[data-text-variant='body'][data-text-size='large'] {
+  font-size: var(--type-size-large);
+}
+
+[data-text-variant][data-text-size='display'] {
+  font-size: var(--type-size-display);
+}
+
+[data-text-variant='caption'] {
+  font-size: var(--type-size-caption);
+  line-height: 1.25;
+}
+
+[data-mono] {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+
+[data-text-tone='muted'] {
+  color: var(--muted-foreground);
+}
+
+[data-text-tone='foreground'] {
+  color: var(--foreground);
+}
+
+[data-text-tone='primary'] {
+  color: var(--primary);
+}
+
+[data-text-tone='success'] {
+  color: var(--success);
+}
+
+[data-text-tone='warning'] {
+  color: var(--warning);
+}
+
+[data-text-tone='financeCash'] {
+  color: var(--finance-cash);
+}
+
+[data-text-tone='financeDebt'] {
+  color: var(--finance-debt);
+}
+
+[data-text-tone='financeInvestment'] {
+  color: var(--finance-investment);
+}
+
+[data-text-align='start'] {
+  text-align: left;
+}
+
+[data-text-align='center'] {
+  text-align: center;
+}
+
+[data-text-align='end'] {
+  text-align: right;
+}
+
+:where([data-numeric='true']) {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+
+[data-text-variant][data-text-numeric],
+[data-numeric='true'] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-text-variant][data-text-truncate],
+[data-truncate='true'] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+[data-text-line] {
+  display: block;
+}
+
+[data-presentation='dashboard'][data-text-line='first'],
+[data-presentation='welcome'][data-text-line='second'] {
+  color: var(--foreground);
+}
+
+[data-presentation='welcome'][data-text-line='first'],
+[data-presentation='dashboard'][data-text-line='second'] {
+  color: var(--muted-foreground);
+}

package/dist/text.js

@@ -1,8 +1,8 @@
+import "./entries/text.css";
 import {
   StackedDisplay,
   Text
-} from "./chunks/chunk-OU7YQUU2.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-W24JGQWM.js";
 export {
   StackedDisplay,
   Text

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@warmio/ui",
-  "version": "1.5.2",
+  "version": "2.0.0",
   "description": "Portable, sealed React components for Warm products.",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/*.css",
+    "./dist/*.js",
+    "./dist/entries/*.css",
+    "./dist/chunks/*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jasonstockman/warm-app.git",
@@ -56,6 +61,8 @@
       "import": "./dist/sidebar.js",
       "default": "./dist/sidebar.js"
     },
+    "./sidebar.css": "./dist/sidebar.css",
+    "./entries/*": "./dist/entries/*",
     "./sheet": {
       "types": "./types/sheet.d.ts",
       "import": "./dist/sheet.js",
@@ -65,11 +72,12 @@
       "types": "./types/text.d.ts",
       "import": "./dist/text.js",
       "default": "./dist/text.js"
-    }
+    },
+    "./text.css": "./dist/text.css"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0 <2.0.0",
-    "@warmio/design": "1.10.0",
+    "@warmio/design": "2.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cuelume": "0.1.0",

package/types/button.d.ts

@@ -1,9 +1,65 @@
-export {
-  Button,
-  ButtonLink,
-  type ButtonLinkProps,
-  type ButtonPresentation,
-  type ButtonProps,
-  type ButtonSize,
-  type ButtonVariant,
-} from '@warmio/design/button';
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
+
+export type ButtonPresentation =
+  | 'assistantIcon'
+  | 'assistantRoundIcon'
+  | 'composerIcon'
+  | 'default'
+  | 'headerAction'
+  | 'compact'
+  | 'controlPeer'
+  | 'editPill'
+  | 'hero'
+  | 'menuOption'
+  | 'promptCategory'
+  | 'promptOption'
+  | 'sidebarIcon'
+  | 'tableHeader'
+  | 'tableHeaderLink'
+  | 'threadMore'
+  | 'threadNew'
+  | 'touch';
+
+export type ButtonVariant = 'default' | 'outline' | 'ghost' | 'destructive' | 'apple' | 'arrow';
+
+export type ButtonSize = 'compact' | 'default' | 'jumbo' | 'icon';
+
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> & {
+  asChild?: never;
+  className?: never;
+  presentation?: ButtonPresentation;
+  render?: never;
+  size?: ButtonSize;
+  style?: never;
+  variant?: ButtonVariant;
+  width?: 'full';
+};
+
+export type ButtonLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'className' | 'disabled' | 'style'
+> & {
+  href: string;
+  presentation?: ButtonPresentation;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  width?: 'full';
+  asChild?: never;
+  className?: never;
+  disabled?: never;
+  render?: never;
+  style?: never;
+};
+
+export declare const Button: ForwardRefExoticComponent<
+  ButtonProps & RefAttributes<HTMLButtonElement>
+>;
+
+export declare const ButtonLink: ForwardRefExoticComponent<
+  ButtonLinkProps & RefAttributes<HTMLAnchorElement>
+>;

package/types/sidebar.d.ts

@@ -11,6 +11,7 @@ export type SidebarProviderProps = WithoutChrome<ComponentProps<'div'>> & {
   onOpenChange?: (open: boolean) => void;
   forceIconAtTablet?: boolean;
   allowUserCollapse?: boolean;
+  allowDesktopCollapse?: boolean;
   expandOnHover?: boolean;
   presentation?: 'mockup' | 'preview';
 };
@@ -51,7 +52,10 @@ export type SidebarGroupLabelProps = WithoutChrome<ComponentProps<'div'>> & {
   presentation?: 'mockup' | 'navigation';
 };
 
-export type SidebarMenuProps = WithoutChrome<ComponentProps<'ul'>>;
+export type SidebarMenuProps = WithoutChrome<ComponentProps<'ul'>> & {
+  spacing?: 'default' | 'roomy' | 'collapsed';
+  fluidHighlights?: boolean;
+};
 export type SidebarMenuItemProps = WithoutChrome<ComponentProps<'li'>>;
 
 export type SidebarMenuButtonProps = WithoutChrome<ComponentProps<'button'>> & {
@@ -62,7 +66,7 @@ export type SidebarMenuButtonProps = WithoutChrome<ComponentProps<'button'>> & {
   variant?: 'default' | 'outline' | null;
   size?: 'default' | null;
   collapsed?: boolean;
-  presentation?: 'account' | 'disabled' | 'navigation' | 'previewCollapsed';
+  presentation?: 'account' | 'disabled' | 'navigation' | 'previewCollapsed' | 'sidebarIcon';
 };
 
 export type SidebarMenuBadgeProps = WithoutChrome<ComponentProps<'div'>> & {
@@ -77,6 +81,9 @@ export type SidebarContextValue = {
   setOpenMobile: (open: boolean | ((open: boolean) => boolean)) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  sidebarMotionEnabled: boolean;
+  expandOnHover: boolean;
+  forceIconAtTablet: boolean;
 };
 
 export declare function SidebarProvider(props: SidebarProviderProps): ReactNode;

package/types/text.d.ts

@@ -17,7 +17,7 @@ export type TextVariant =
   | 'sectionTitle';
 export type TextTone = 'default' | 'foreground' | 'muted' | 'primary' | 'success' | 'warning';
 export type TextAlign = 'center' | 'end' | 'start';
-export type TextProps = {
+type TextBaseProps = {
   align?: TextAlign;
   as?: 'div' | 'h1' | 'h2' | 'h3' | 'p' | 'small' | 'span';
   children?: ReactNode;
@@ -26,8 +26,14 @@ export type TextProps = {
   style?: never;
   tone?: TextTone;
   truncate?: boolean;
-  variant?: TextVariant;
 };
+export type TextProps =
+  | (TextBaseProps & { size?: 'default' | 'large' | 'display'; variant: 'body' })
+  | (TextBaseProps & { size?: 'default' | 'display'; variant: 'heading' })
+  | (TextBaseProps & {
+      size?: never;
+      variant?: Exclude<TextVariant, 'body' | 'heading'>;
+    });
 export type StackedDisplayProps = {
   align?: TextAlign;
   className?: never;