@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/index.css

@@ -3,8 +3,22 @@
 @import "./tokens.css";
 @import "./typography.css";
 
-@theme {
-	--color-selection: var(--color-blue-300);
+@utility typo-label-tiny {
+	font-size: var(--font-size-xxs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+	letter-spacing: var(--font-tracking-wide);
+	text-transform: uppercase;
+}
+
+.lucide {
+	/* Change this! */
+	stroke-width: 1.5px;
+}
+
+@theme inline {
+	--color-selection: var(--hs-selection);
 	--color-ring-red: var(--color-red-200);
 	--color-ring-green: var(--color-green-200);
 	--color-ring-yellow: var(--color-yellow-200);
@@ -12,93 +26,363 @@
 	--color-ring-orange: var(--color-orange-200);
 	--color-ring-pink: var(--color-pink-200);
 	--color-ring-blue: var(--color-blue-300);
-	--color-ring-red: var(--color-red-200);
-	--color-text-primary: var(--color-neutral-900);
-	--color-text-secondary: var(--color-neutral-500);
-	--color-text-secondary_hover: var(--color-neutral-600);
-	--color-text-primary_on-brand: var(--color-neutral-50);
-	--color-text-secondary_on-brand: var(--color-neutral-100);
-	--color-text-tertiary: var(--color-neutral-400);
-	--color-text-quternary: var(--color-neutral-400);
-	--color-text-quternary_hover: var(--color-neutral-500);
-	--color-text-quternary_on-brand: var(--color-neutral-200);
-	--color-text-disabled: var(--color-neutral-300);
-	--color-text-link: var(--color-blue-500);
-	--color-text-link_hover: var(--color-blue-600);
-	--color-text-link_disabled: var(--color-blue-400);
-	--color-text-brand-primary: var(--color-brand-500);
-	--color-text-brand-secondary: var(--color-brand-300);
-	--color-text-brand-secondary_hover: var(--color-brand-400);
-	--color-text-error-primary: var(--color-red-500);
-	--color-text-error-secondary: var(--color-red-400);
-	--color-text-success-primary: var(--color-green-500);
-	--color-text-warning-primary: var(--color-yellow-500);
+	--color-text-primary: var(--hs-text-primary);
+	--color-text-secondary: var(--hs-text-secondary);
+	--color-text-secondary_hover: var(--hs-text-secondary-hover);
+	--color-text-primary_on-brand: var(--hs-text-primary-on-brand);
+	--color-text-secondary_on-brand: var(--hs-text-secondary-on-brand);
+	--color-text-tertiary: var(--hs-text-tertiary);
+	--color-text-tertiary_hover: var(--hs-text-tertiary-hover);
+	--color-text-quternary: var(--hs-text-quaternary);
+	--color-text-quternary_hover: var(--hs-text-quaternary-hover);
+	--color-text-quternary_on-brand: var(--hs-text-quaternary-on-brand);
+	--color-text-disabled: var(--hs-text-disabled);
+	--color-text-link: var(--hs-text-link);
+	--color-text-link_hover: var(--hs-text-link-hover);
+	--color-text-link_disabled: var(--hs-text-link-disabled);
+	--color-text-brand-primary: var(--hs-text-brand-primary);
+	--color-text-brand-secondary: var(--hs-text-brand-secondary);
+	--color-text-brand-secondary_hover: var(--hs-text-brand-secondary-hover);
+	--color-text-error-primary: var(--hs-text-error-primary);
+	--color-text-error-secondary: var(--hs-text-error-secondary);
+	--color-text-success-primary: var(--hs-text-success-primary);
+	--color-text-warning-primary: var(--hs-text-warning-primary);
+	--color-text-info-primary: var(--hs-text-info-primary);
 	--color-white: #ffffff;
-	--color-border-primary: var(--color-neutral-300);
-	--color-border-primary_hover: var(--color-neutral-400);
-	--color-border-secondary: var(--color-neutral-200);
-	--color-border-separator: var(--color-neutral-200);
-	--color-border-disabled: var(--color-neutral-100);
+	--color-border-primary: var(--hs-border-primary);
+	--color-border-primary_hover: var(--hs-border-primary-hover);
+	--color-border-secondary: var(--hs-border-secondary);
+	--color-border-separator: var(--hs-border-separator);
+	--color-border-disabled: var(--hs-border-disabled);
+	--color-border-dark: var(--hs-border-dark);
 	--color-border-brand: var(--color-brand-500);
 	--color-border-link: var(--color-blue-500);
 	--color-border-error: var(--color-red-500);
 	--color-border-error_inverse: var(--color-red-400);
 	--color-border-error_inverse_hover: var(--color-red-300);
 	--color-border-success: var(--color-green-500);
-	--color-bg-primary: #ffffff;
-	--color-bg-primary_inverse: var(--color-neutral-900);
-	--color-bg-secondary: var(--color-neutral-50);
-	--color-bg-tertiary: var(--color-neutral-100);
-	--color-bg-quaternary: var(--color-neutral-200);
-	--color-bg-overlay: var(--color-neutral-900);
-	--color-bg-disabled: var(--color-neutral-300);
-	--color-bg-brand-primary: var(--color-brand-50);
-	--color-bg-brand-primary_inverse: var(--color-brand-500);
-	--color-bg-brand-secondary: var(--color-brand-100);
-	--color-bg-brand-tertiary: var(--color-brand-200);
-
-	--color-bg-link: var(--color-blue-500);
-	--color-bg-link_hover: var(--color-blue-600);
-	--color-bg-error-primary: var(--color-red-50);
-	--color-bg-error-primary_inverse: var(--color-red-500);
-	--color-bg-error-primary_inverse_hover: var(--color-red-700);
-	--color-bg-error-secondary: var(--color-red-100);
-	--color-bg-error-tertiary: var(--color-red-200);
-	--color-bg-success-primary: var(--color-green-50);
-	--color-bg-success-primary_inverse: var(--color-green-500);
-	--color-bg-success-secondary: var(--color-green-100);
-	--color-bg-warning-primary: var(--color-yellow-50);
-	--color-bg-warning-primary_inverse: var(--color-yellow-500);
-	--color-bg-warning-secondary: var(--color-yellow-100);
-	--color-fg-primary: var(--color-neutral-900);
-	--color-fg-primary_inverse: var(--white);
-	--color-fg-primary_on-brand: var(--color-neutral-50);
-	--color-fg-secondary: var(--color-neutral-700);
-	--color-fg-secondary_inverse: var(--color-neutral-400);
-	--color-fg-secondary_hover: var(--color-neutral-800);
-	--color-fg-secondary_on-brand: var(--color-neutral-100);
-	--color-fg-tertiary: var(--color-neutral-400);
-	--color-fg-tertiary_hover: var(--color-neutral-600);
-	--color-fg-tertiary_on-brand: var(--color-neutral-200);
-	--color-fg-disabled: var(--color-neutral-300);
-	--color-fg-brand-primary: var(--color-brand-500);
-	--color-fg-brand-secondary: var(--color-brand-300);
-	--color-fg-link: var(--color-blue-500);
-	--color-fg-error-primary: var(--color-red-500);
-	--color-fg-error-secondary: var(--color-red-400);
-	--color-fg-success-primary: var(--color-green-500);
-	--color-fg-success-secondary: var(--color-green-400);
-	--color-fg-warning-primary: var(--color-yellow-500);
-	--color-fg-warning-secondary: var(--color-yellow-400);
-
+	--color-border-warning-primary: var(--color-yellow-500);
+	--color-border-warning-secondary: var(--color-yellow-300);
+	--color-bg-primary: var(--hs-bg-primary);
+	--color-bg-primary_inverse: var(--hs-bg-primary-inverse);
+	--color-bg-secondary: var(--hs-bg-secondary);
+	--color-bg-secondary_inverse: var(--hs-bg-secondary-inverse);
+	--color-bg-secondary_inverse_hover: var(--hs-bg-secondary-inverse-hover);
+	--color-bg-tertiary: var(--hs-bg-tertiary);
+	--color-bg-tertiary_inverse: var(--hs-bg-tertiary-inverse);
+	--color-bg-quaternary: var(--hs-bg-quaternary);
+	--color-bg-overlay: var(--hs-bg-overlay);
+	--color-bg-disabled: var(--hs-bg-disabled);
+	--color-bg-hover: var(--hs-bg-hover);
+	--color-bg-dark_tertiary: var(--hs-bg-dark-tertiary);
+	--color-bg-brand-primary: var(--hs-bg-brand-primary);
+	--color-bg-brand-primary_inverse: var(--hs-bg-brand-primary-inverse);
+	--color-bg-brand-secondary: var(--hs-bg-brand-secondary);
+	--color-bg-brand-tertiary: var(--hs-bg-brand-tertiary);
+	--color-bg-link: var(--hs-bg-link);
+	--color-bg-link_disabled: var(--hs-bg-link-disabled);
+	--color-bg-link_hover: var(--hs-bg-link-hover);
+	--color-bg-error-primary: var(--hs-bg-error-primary);
+	--color-bg-error-primary_inverse: var(--hs-bg-error-primary-inverse);
+	--color-bg-error-primary_inverse_hover: var(
+		--hs-bg-error-primary-inverse-hover
+	);
+	--color-bg-error-secondary: var(--hs-bg-error-secondary);
+	--color-bg-error-tertiary: var(--hs-bg-error-tertiary);
+	--color-bg-success-primary: var(--hs-bg-success-primary);
+	--color-bg-success-primary_inverse: var(--hs-bg-success-primary-inverse);
+	--color-bg-success-secondary: var(--hs-bg-success-secondary);
+	--color-bg-warning-primary: var(--hs-bg-warning-primary);
+	--color-bg-warning-primary_inverse: var(--hs-bg-warning-primary-inverse);
+	--color-bg-warning-secondary: var(--hs-bg-warning-secondary);
+	--color-bg-info-primary: var(--hs-bg-info-primary);
+	--color-bg-info-primary_inverse: var(--hs-bg-info-primary-inverse);
+	--color-bg-neutral-primary: var(--hs-bg-neutral-primary);
+	--color-bg-neutral-primary_inverse: var(--hs-bg-neutral-primary-inverse);
+	--color-fg-primary: var(--hs-fg-primary);
+	--color-fg-primary_inverse: var(--hs-fg-primary-inverse);
+	--color-fg-primary_on-brand: var(--hs-fg-primary-on-brand);
+	--color-fg-secondary: var(--hs-fg-secondary);
+	--color-fg-secondary_inverse: var(--hs-fg-secondary-inverse);
+	--color-fg-secondary_hover: var(--hs-fg-secondary-hover);
+	--color-fg-secondary_on-brand: var(--hs-fg-secondary-on-brand);
+	--color-fg-tertiary: var(--hs-fg-tertiary);
+	--color-fg-tertiary_hover: var(--hs-fg-tertiary-hover);
+	--color-fg-tertiary_on-brand: var(--hs-fg-tertiary-on-brand);
+	--color-fg-disabled: var(--hs-fg-disabled);
+	--color-fg-brand-primary: var(--hs-fg-brand-primary);
+	--color-fg-brand-secondary: var(--hs-fg-brand-secondary);
+	--color-fg-link: var(--hs-fg-link);
+	--color-fg-error-primary: var(--hs-fg-error-primary);
+	--color-fg-error-secondary: var(--hs-fg-error-secondary);
+	--color-fg-success-primary: var(--hs-fg-success-primary);
+	--color-fg-success-secondary: var(--hs-fg-success-secondary);
+	--color-fg-warning-primary: var(--hs-fg-warning-primary);
+	--color-fg-warning-secondary: var(--hs-fg-warning-secondary);
+	--color-fg-info-primary: var(--hs-fg-info-primary);
+	--color-fg-neutral-primary: var(--hs-fg-neutral-primary);
 	--color-utility-green: var(--color-green-500);
 	--color-utility-yellow: var(--color-yellow-600);
 	--color-utility-blue: var(--color-blue-500);
 	--color-utility-violet: var(--color-violet-500);
 	--color-utility-red: var(--color-red-500);
+	--font-leading-14: 56px;
+}
+
+:root {
+	--hs-selection: var(--color-blue-300);
+	--hs-text-primary: var(--color-neutral-900);
+	--hs-text-secondary: var(--color-neutral-500);
+	--hs-text-secondary-hover: var(--color-neutral-600);
+	--hs-text-primary-on-brand: var(--color-neutral-50);
+	--hs-text-secondary-on-brand: var(--color-neutral-100);
+	--hs-text-tertiary: var(--color-neutral-500);
+	--hs-text-tertiary-hover: var(--color-neutral-500);
+	--hs-text-quaternary: var(--color-neutral-500);
+	--hs-text-quaternary-hover: var(--color-neutral-600);
+	--hs-text-quaternary-on-brand: var(--color-neutral-200);
+	--hs-text-disabled: var(--color-neutral-300);
+	--hs-text-link: var(--color-blue-500);
+	--hs-text-link-hover: var(--color-blue-600);
+	--hs-text-link-disabled: var(--color-blue-400);
+	--hs-text-brand-primary: var(--color-brand-500);
+	--hs-text-brand-secondary: var(--color-brand-300);
+	--hs-text-brand-secondary-hover: var(--color-brand-400);
+	--hs-text-error-primary: var(--color-red-500);
+	--hs-text-error-secondary: var(--color-red-400);
+	--hs-text-success-primary: var(--color-green-500);
+	--hs-text-warning-primary: var(--color-yellow-700);
+	--hs-text-info-primary: var(--color-blue-600);
+	--hs-border-primary: var(--color-neutral-300);
+	--hs-border-primary-hover: var(--color-neutral-400);
+	--hs-border-secondary: var(--color-neutral-200);
+	--hs-border-separator: var(--color-neutral-200);
+	--hs-border-disabled: var(--color-neutral-100);
+	--hs-border-dark: var(--color-neutral-500);
+	--hs-bg-primary: #ffffff;
+	--hs-bg-primary-inverse: var(--color-neutral-900);
+	--hs-bg-secondary: var(--color-neutral-50);
+	--hs-bg-secondary-inverse: var(--color-neutral-500);
+	--hs-bg-secondary-inverse-hover: var(--color-neutral-600);
+	--hs-bg-tertiary: var(--color-neutral-100);
+	--hs-bg-tertiary-inverse: var(--color-neutral-400);
+	--hs-bg-quaternary: var(--color-neutral-200);
+	--hs-bg-overlay: var(--color-neutral-900);
+	--hs-bg-disabled: var(--color-neutral-300);
+	--hs-bg-hover: var(--color-blue-200);
+	--hs-bg-dark-tertiary: var(--color-neutral-400);
+	--hs-bg-brand-primary: var(--color-brand-50);
+	--hs-bg-brand-primary-inverse: var(--color-brand-500);
+	--hs-bg-brand-secondary: var(--color-brand-100);
+	--hs-bg-brand-tertiary: var(--color-brand-200);
+	--hs-bg-link: var(--color-blue-500);
+	--hs-bg-link-disabled: var(--color-blue-400);
+	--hs-bg-link-hover: var(--color-blue-600);
+	--hs-bg-error-primary: var(--color-red-50);
+	--hs-bg-error-primary-inverse: var(--color-red-500);
+	--hs-bg-error-primary-inverse-hover: var(--color-red-700);
+	--hs-bg-error-secondary: var(--color-red-100);
+	--hs-bg-error-tertiary: var(--color-red-200);
+	--hs-bg-success-primary: var(--color-green-50);
+	--hs-bg-success-primary-inverse: var(--color-green-500);
+	--hs-bg-success-secondary: var(--color-green-100);
+	--hs-bg-warning-primary: var(--color-yellow-50);
+	--hs-bg-warning-primary-inverse: var(--color-yellow-500);
+	--hs-bg-warning-secondary: var(--color-yellow-100);
+	--hs-bg-info-primary: var(--color-blue-100);
+	--hs-bg-info-primary-inverse: var(--color-blue-500);
+	--hs-bg-neutral-primary: var(--color-neutral-100);
+	--hs-bg-neutral-primary-inverse: var(--color-neutral-900);
+	--hs-fg-primary: var(--color-neutral-900);
+	--hs-fg-primary-inverse: #ffffff;
+	--hs-fg-primary-on-brand: var(--color-neutral-50);
+	--hs-fg-secondary: var(--color-neutral-500);
+	--hs-fg-secondary-inverse: var(--color-neutral-400);
+	--hs-fg-secondary-hover: var(--color-neutral-600);
+	--hs-fg-secondary-on-brand: var(--color-neutral-100);
+	--hs-fg-tertiary: var(--color-neutral-500);
+	--hs-fg-tertiary-hover: var(--color-neutral-600);
+	--hs-fg-tertiary-on-brand: var(--color-neutral-200);
+	--hs-fg-disabled: var(--color-neutral-300);
+	--hs-fg-brand-primary: var(--color-red-400);
+	--hs-fg-brand-secondary: var(--color-brand-300);
+	--hs-fg-link: var(--color-blue-500);
+	--hs-fg-error-primary: var(--color-red-500);
+	--hs-fg-error-secondary: var(--color-red-400);
+	--hs-fg-success-primary: var(--color-green-500);
+	--hs-fg-success-secondary: var(--color-green-400);
+	--hs-fg-warning-primary: var(--color-yellow-500);
+	--hs-fg-warning-secondary: var(--color-yellow-500);
+	--hs-fg-info-primary: var(--color-blue-600);
+	--hs-fg-neutral-primary: var(--color-neutral-500);
+	--hs-syntax-property: #ea4a35;
+	--hs-syntax-string: #405cbf;
+	--hs-syntax-number: #00a984;
+	--hs-syntax-keyword: #569cd6;
+	--hs-syntax-comment: #00a984;
 }
 
 @theme inline {
 	--font-family-sans: "Inter", system-ui, sans-serif;
 	--font-family-mono: "JetBrains Mono", monospace;
 }
+
+.dark {
+	/* tokens.css overrides */
+	--hs-elements-readable: oklch(0.985 0 0);
+	--hs-elements-readable-inv: oklch(0.205 0 0);
+	--hs-elements-assistive: oklch(0.556 0 0);
+	--hs-elements-disabled: oklch(0.371 0 0);
+	--hs-surface-0: oklch(0.178 0 0);
+	--hs-surface-1: oklch(0.205 0 0);
+	--hs-surface-selected: oklch(0.269 0 0);
+	--hs-border-default: oklch(1 0 0 / 10%);
+	--hs-separator: oklch(1 0 0 / 8%);
+
+	/* Selection */
+	--hs-selection: var(--color-blue-800);
+
+	/* Text */
+	--hs-text-primary: oklch(0.985 0 0);
+	--hs-text-secondary: oklch(0.556 0 0);
+	--hs-text-secondary-hover: oklch(0.708 0 0);
+	--hs-text-primary-on-brand: oklch(0.985 0 0);
+	--hs-text-secondary-on-brand: oklch(0.87 0 0);
+	--hs-text-tertiary: oklch(0.45 0 0);
+	--hs-text-tertiary-hover: oklch(0.556 0 0);
+	--hs-text-quaternary: oklch(0.45 0 0);
+	--hs-text-quaternary-hover: oklch(0.556 0 0);
+	--hs-text-disabled: oklch(0.371 0 0);
+	--hs-text-link: var(--color-blue-400);
+	--hs-text-link-hover: var(--color-blue-300);
+	--hs-text-link-disabled: var(--color-blue-600);
+	--hs-text-brand-primary: var(--color-brand-400);
+	--hs-text-brand-secondary: var(--color-brand-300);
+	--hs-text-brand-secondary-hover: var(--color-brand-200);
+	--hs-text-error-primary: var(--color-red-300);
+	--hs-text-error-secondary: var(--color-red-300);
+	--hs-text-success-primary: var(--color-green-400);
+	--hs-text-warning-primary: var(--color-yellow-400);
+	--hs-text-info-primary: var(--color-blue-400);
+
+	/* Borders */
+	--hs-border-primary: oklch(1 0 0 / 12%);
+	--hs-border-primary-hover: oklch(1 0 0 / 18%);
+	--hs-border-secondary: oklch(1 0 0 / 8%);
+	--hs-border-separator: oklch(1 0 0 / 8%);
+	--hs-border-disabled: oklch(1 0 0 / 5%);
+	--hs-border-dark: oklch(0.556 0 0);
+
+	/* Backgrounds — primary/secondary swapped */
+	--hs-bg-primary: #1a1b1e;
+	--hs-bg-primary-inverse: oklch(0.985 0 0);
+	--hs-bg-secondary: oklch(0.188 0 0);
+	--hs-bg-secondary-inverse: oklch(0.556 0 0);
+	--hs-bg-secondary-inverse-hover: oklch(0.708 0 0);
+	--hs-bg-tertiary: oklch(0.198 0 0);
+	--hs-bg-tertiary-inverse: oklch(0.45 0 0);
+	--hs-bg-quaternary: oklch(0.269 0 0);
+	--hs-bg-overlay: oklch(0.1 0 0);
+	--hs-bg-disabled: oklch(0.269 0 0);
+	--hs-bg-hover: var(--color-blue-900);
+	--hs-bg-dark-tertiary: oklch(0.371 0 0);
+	--hs-bg-brand-primary: var(--color-brand-900);
+	--hs-bg-brand-primary-inverse: var(--color-brand-400);
+	--hs-bg-brand-secondary: var(--color-brand-900);
+	--hs-bg-brand-tertiary: var(--color-brand-800);
+	--hs-bg-link: var(--color-blue-500);
+	--hs-bg-link-hover: var(--color-blue-400);
+	--hs-bg-link-disabled: var(--color-blue-800);
+	--hs-bg-error-primary: var(--color-red-900);
+	--hs-bg-error-primary-inverse: var(--color-red-400);
+	--hs-bg-error-primary-inverse-hover: var(--color-red-300);
+	--hs-bg-error-secondary: var(--color-red-900);
+	--hs-bg-error-tertiary: var(--color-red-800);
+	--hs-bg-success-primary: var(--color-green-950);
+	--hs-bg-success-primary-inverse: var(--color-green-500);
+	--hs-bg-success-secondary: var(--color-green-800);
+	--hs-bg-warning-primary: var(--color-yellow-900);
+	--hs-bg-warning-primary-inverse: var(--color-yellow-500);
+	--hs-bg-warning-secondary: var(--color-yellow-900);
+	--hs-bg-info-primary: var(--color-blue-900);
+	--hs-bg-info-primary-inverse: var(--color-blue-400);
+	--hs-bg-neutral-primary: oklch(0.205 0 0);
+	--hs-bg-neutral-primary-inverse: oklch(0.985 0 0);
+
+	/* Foreground */
+	--hs-fg-primary: oklch(0.985 0 0);
+	--hs-fg-primary-inverse: oklch(0.205 0 0);
+	--hs-fg-primary-on-brand: oklch(0.985 0 0);
+	--hs-fg-secondary: oklch(0.708 0 0);
+	--hs-fg-secondary-inverse: oklch(0.371 0 0);
+	--hs-fg-secondary-hover: oklch(0.87 0 0);
+	--hs-fg-secondary-on-brand: oklch(0.87 0 0);
+	--hs-fg-tertiary: oklch(0.556 0 0);
+	--hs-fg-tertiary-hover: oklch(0.708 0 0);
+	--hs-fg-tertiary-on-brand: oklch(0.708 0 0);
+	--hs-fg-disabled: oklch(0.371 0 0);
+	--hs-fg-brand-primary: var(--color-brand-400);
+	--hs-fg-brand-secondary: var(--color-brand-300);
+	--hs-fg-link: var(--color-blue-400);
+	--hs-fg-error-primary: var(--color-red-300);
+	--hs-fg-error-secondary: var(--color-red-300);
+	--hs-fg-success-primary: var(--color-green-400);
+	--hs-fg-success-secondary: var(--color-green-300);
+	--hs-fg-warning-primary: var(--color-yellow-500);
+	--hs-fg-warning-secondary: var(--color-yellow-500);
+	--hs-fg-info-primary: var(--color-blue-400);
+	--hs-fg-neutral-primary: oklch(0.556 0 0);
+	--hs-syntax-property: #f87171;
+	--hs-syntax-string: #7cacf8;
+	--hs-syntax-number: #34d399;
+	--hs-syntax-keyword: #7cacf8;
+	--hs-syntax-comment: #6b7280;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+	display: none;
+}
+
+.no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+body ::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+body ::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+body ::-webkit-scrollbar-thumb {
+	background-color: var(--color-elements-disabled);
+	border-radius: 4px;
+}
+
+body ::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-elements-assistive);
+}
+@supports not selector(::-webkit-scrollbar) {
+	body {
+		scrollbar-color: var(--color-elements-disabled) rgba(0, 0, 0, 0);
+		scrollbar-width: thin;
+	}
+}
+
+.toolbar-shadow {
+	box-shadow:
+		0px 70px 20px 0px rgba(0, 0, 0, 0),
+		0px 45px 18px 0px rgba(0, 0, 0, 0),
+		0px 25px 15px 0px rgba(0, 0, 0, 0.01),
+		0px 11px 11px 0px rgba(0, 0, 0, 0.02),
+		0px 3px 6px 0px rgba(0, 0, 0, 0.02);
+}
+
+.dropdown-menu-shadow {
+	box-shadow:
+		0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+		0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+}

package/src/index.tsx

@@ -1,9 +1,21 @@
 // Shadcn Components
-
-export * from "./components/code-editor";
+export { type ExternalToast, toast } from "sonner";
+export * from "./components/button-dropdown";
 export * from "./components/code-editor";
 export * from "./components/copy-icon";
+export * from "./components/data-table";
+export * from "./components/date-picker-input";
+export * from "./components/fhir-structure-view";
+export * from "./components/icon-button";
+export * from "./components/operation-outcome-view";
 export * from "./components/request-line-editor";
+export * from "./components/segment-control";
+export * from "./components/split-button";
+export * from "./components/tag";
+export * from "./components/tile";
+export * from "./components/toolbar";
+export * from "./components/tree-view";
+export * from "./icons";
 export * from "./shadcn/components/ui/accordion";
 export * from "./shadcn/components/ui/alert";
 export * from "./shadcn/components/ui/alert-dialog";
@@ -18,6 +30,7 @@ export * from "./shadcn/components/ui/carousel";
 export * from "./shadcn/components/ui/chart";
 export * from "./shadcn/components/ui/checkbox";
 export * from "./shadcn/components/ui/collapsible";
+export * from "./shadcn/components/ui/combobox";
 export * from "./shadcn/components/ui/command";
 export * from "./shadcn/components/ui/context-menu";
 export * from "./shadcn/components/ui/dialog";
@@ -50,6 +63,7 @@ export * from "./shadcn/components/ui/textarea";
 export * from "./shadcn/components/ui/toggle";
 export * from "./shadcn/components/ui/toggle-group";
 export * from "./shadcn/components/ui/tooltip";
-
+export * from "./shadcn/components/ui/tree";
 // Hooks
 export * from "./shadcn/hooks/use-mobile";
+export * from "./shadcn/lib/utils";

package/src/shadcn/components/ui/accordion.tsx

@@ -4,22 +4,104 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Accordion item styles
+const accordionItemStyles = cn("flex", "flex-col");
+
+// Accordion trigger styles
+const accordionTriggerStyles = cn(
+	// Layout
+	"flex",
+	"flex-1",
+	"items-center",
+	"justify-between",
+	"gap-2",
+	// Typography
+	"body16bold",
+	"tracking-tight",
+	"text-text-primary",
+	// Interaction
+	"cursor-pointer",
+	"transition-all",
+	"outline-none",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	// Icon rotation
+	"[&[data-state=open]>svg]:rotate-180",
+);
+
+// Accordion content styles
+const accordionContentStyles = cn(
+	"data-[state=closed]:animate-accordion-up",
+	"data-[state=open]:animate-accordion-down",
+	"overflow-hidden",
+);
+
+// Accordion content inner styles
+const accordionContentInnerStyles = cn(
+	"body14",
+	"text-text-secondary_hover",
+	"pt-3",
+	"pb-0",
+);
+
+// Accordion separator styles
+const accordionSeparatorStyles = cn(
+	"h-px",
+	"border-t",
+	"border-border-separator",
+	"mt-2",
+);
+
+// Accordion chevron styles
+const accordionChevronStyles = cn(
+	"text-text-secondary",
+	"pointer-events-none",
+	"size-4",
+	"shrink-0",
+	"transition-transform",
+	"duration-200",
+);
+
 function Accordion({
+	className,
 	...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+	return (
+		<AccordionPrimitive.Root
+			data-slot="accordion"
+			className={cn(
+				"flex",
+				"flex-col",
+				"gap-2",
+				"[&>[data-slot=accordion-item]:last-child>[data-slot=accordion-separator]]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function AccordionItem({
 	className,
+	children,
 	...props
 }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
 	return (
 		<AccordionPrimitive.Item
 			data-slot="accordion-item"
-			className={cn("border-b last:border-b-0", className)}
+			className={cn(accordionItemStyles, className)}
 			{...props}
-		/>
+		>
+			{children}
+			<div
+				data-slot="accordion-separator"
+				className={accordionSeparatorStyles}
+			/>
+		</AccordionPrimitive.Item>
 	);
 }
 
@@ -32,14 +114,11 @@ function AccordionTrigger({
 		<AccordionPrimitive.Header className="flex">
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
-				className={cn(
-					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-					className,
-				)}
+				className={cn(accordionTriggerStyles, className)}
 				{...props}
 			>
 				{children}
-				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+				<ChevronDownIcon className={accordionChevronStyles} />
 			</AccordionPrimitive.Trigger>
 		</AccordionPrimitive.Header>
 	);
@@ -53,10 +132,12 @@ function AccordionContent({
 	return (
 		<AccordionPrimitive.Content
 			data-slot="accordion-content"
-			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			className={accordionContentStyles}
 			{...props}
 		>
-			<div className={cn("pt-0 pb-4", className)}>{children}</div>
+			<div className={cn(accordionContentInnerStyles, className)}>
+				{children}
+			</div>
 		</AccordionPrimitive.Content>
 	);
 }