@toolr/ui-design 0.1.2 → 0.1.4

package/dist/tokens/primitives.css

@@ -21,6 +21,16 @@
   --color-neutral-100: #f0f0f0;
   --color-neutral-50:  #fafafa;
 
+  /* Typography — minimum font size */
+  --font-size-xss: 11px;
+
+  /* Breakpoints */
+  --breakpoint-3xl: 100rem;
+  --breakpoint-4xl: 156.25rem;
+
+  /* Font family */
+  --font-sans: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
   /* Disable Tailwind default gray to prevent accidental usage */
   --color-gray-*: initial;
 }

package/dist/tokens/semantic.css

@@ -20,6 +20,9 @@
   --surface-overlay: var(--color-neutral-700);
   --surface-hover: var(--color-neutral-750);
 
+  /* Dialog backdrop: modal/dialog overlays */
+  --dialog-backdrop: rgba(0, 0, 0, 0.85);
+
   /* Popover: floating panels, dropdown menus */
   --popover: rgba(0, 0, 0, 0.8);
   --popover-foreground: var(--color-neutral-300);

package/index.ts

@@ -32,7 +32,6 @@ export { FormActions, type FormActionsProps } from './components/ui/form-actions
 export { ConfirmModal, AlertModal, type ConfirmModalProps, type AlertModalProps, type ModalKind, type ModalSize } from './components/ui/modal.tsx'
 export { ActionDialog, type ActionDialogProps } from './components/ui/action-dialog.tsx'
 export { ExecutionDetailsPanel, type ExecutionDetailsPanelProps, type ExecutionDetailRow } from './components/ui/execution-details-panel.tsx'
-export { SettingRow, type SettingRowProps } from './components/ui/setting-row.tsx'
 export { FileTree, collectDirPaths, type FileTreeProps, type FileTreeNode } from './components/ui/file-tree.tsx'
 export { EditorToolbar, type EditorToolbarProps } from './components/ui/editor-toolbar.tsx'
 export { BottomPanelHeader, type BottomPanelHeaderProps, type PanelTab, type StatusBanner } from './components/ui/bottom-panel-header.tsx'
@@ -123,6 +122,10 @@ export { useDropdownMaxHeight } from './components/hooks/use-dropdown-max-height
 export { useNavigationHistory, type UseNavigationHistoryReturn } from './components/hooks/use-navigation-history.ts'
 
 // Settings
+export { SettingRow, type SettingRowProps } from './components/ui/setting-row.tsx'
+export { SettingsCard, type SettingsCardProps } from './components/ui/settings-card.tsx'
+export { SettingsInfoBox, type SettingsInfoBoxProps, type SettingsInfoBoxColor } from './components/ui/settings-info-box.tsx'
+export { SettingsSectionTitle, type SettingsSectionTitleProps } from './components/ui/settings-section-title.tsx'
 export {
   SettingsPanel, type SettingsPanelProps,
   SettingsTreeNav, type SettingsTreeNavProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolr/ui-design",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -15,11 +15,6 @@
       "source": "./tokens/theme.css",
       "default": "./dist/tokens/theme.css"
     },
-    "./preset": {
-      "source": "./tailwind-preset.ts",
-      "import": "./dist/preset.js",
-      "types": "./dist/preset.d.ts"
-    },
     "./content": {
       "source": "./components/content/info-panel-primitives.tsx",
       "import": "./dist/content.js",
@@ -38,7 +33,6 @@
   "files": [
     "dist",
     "index.ts",
-    "tailwind-preset.ts",
     "components",
     "tokens"
   ],

package/tokens/primitives.css

@@ -21,6 +21,16 @@
   --color-neutral-100: #f0f0f0;
   --color-neutral-50:  #fafafa;
 
+  /* Typography — minimum font size */
+  --font-size-xss: 11px;
+
+  /* Breakpoints */
+  --breakpoint-3xl: 100rem;
+  --breakpoint-4xl: 156.25rem;
+
+  /* Font family */
+  --font-sans: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+
   /* Disable Tailwind default gray to prevent accidental usage */
   --color-gray-*: initial;
 }

package/tokens/semantic.css

@@ -20,6 +20,9 @@
   --surface-overlay: var(--color-neutral-700);
   --surface-hover: var(--color-neutral-750);
 
+  /* Dialog backdrop: modal/dialog overlays */
+  --dialog-backdrop: rgba(0, 0, 0, 0.85);
+
   /* Popover: floating panels, dropdown menus */
   --popover: rgba(0, 0, 0, 0.8);
   --popover-foreground: var(--color-neutral-300);

package/dist/preset.d.ts

@@ -1,24 +0,0 @@
-/**
- * Shared Tailwind 4 preset for toolr apps.
- *
- * Consuming apps import the token CSS via:
- *   @import "@toolr/ui-design/tokens";
- *
- * This preset provides shared theme extensions (breakpoints, etc.)
- * that all apps should use.
- */
-declare const toolrPreset: {
-    theme: {
-        extend: {
-            screens: {
-                '3xl': string;
-                '4xl': string;
-            };
-            fontFamily: {
-                sans: string[];
-            };
-        };
-    };
-};
-
-export { toolrPreset };

package/dist/preset.js

@@ -1,17 +0,0 @@
-// tailwind-preset.ts
-var toolrPreset = {
-  theme: {
-    extend: {
-      screens: {
-        "3xl": "100rem",
-        "4xl": "156.25rem"
-      },
-      fontFamily: {
-        sans: ["Inter", "system-ui", "Avenir", "Helvetica", "Arial", "sans-serif"]
-      }
-    }
-  }
-};
-export {
-  toolrPreset
-};

package/tailwind-preset.ts

@@ -1,22 +0,0 @@
-/**
- * Shared Tailwind 4 preset for toolr apps.
- *
- * Consuming apps import the token CSS via:
- *   @import "@toolr/ui-design/tokens";
- *
- * This preset provides shared theme extensions (breakpoints, etc.)
- * that all apps should use.
- */
-export const toolrPreset = {
-  theme: {
-    extend: {
-      screens: {
-        '3xl': '100rem',
-        '4xl': '156.25rem',
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
-      },
-    },
-  },
-}