@reshape-biotech/design-system 2.4.2 → 2.5.2

package/dist/notifications.d.ts

@@ -0,0 +1,19 @@
+import type { IconName } from './../lib/components/icons/index.ts';
+export type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'default';
+export interface Notification {
+    id: string;
+    type: NotificationType;
+    message: string;
+    timeout?: number;
+    icon?: IconName;
+    dismissable: boolean;
+}
+export declare const notifications: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    dismiss: (id: string) => void;
+    default: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    danger: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    warning: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    info: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    success: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+};

package/dist/notifications.js

@@ -0,0 +1,27 @@
+import { writable } from 'svelte/store';
+const TIMEOUT = 3000;
+const createNotificationStore = () => {
+    const { subscribe, update } = writable([]);
+    const send = (message, type = 'default', iconName, dismissable = false, timeout = 3000) => {
+        const notification = { id: id(), type, message, timeout, icon: iconName, dismissable };
+        update((state) => [...state, notification]);
+        setTimeout(() => {
+            update((state) => state.filter((n) => n.id !== notification.id));
+        }, timeout);
+    };
+    return {
+        subscribe,
+        dismiss: (id) => {
+            update((state) => state.filter((n) => n.id !== id));
+        },
+        default: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'default', icon, dismissable, timeout),
+        danger: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'danger', icon, dismissable, timeout),
+        warning: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'warning', icon, dismissable, timeout),
+        info: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'info', icon, dismissable, timeout),
+        success: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'success', icon, dismissable, timeout),
+    };
+};
+const id = () => {
+    return crypto.randomUUID();
+};
+export const notifications = createNotificationStore();

package/dist/styles.d.ts

@@ -0,0 +1 @@
+import './app.css';

package/dist/styles.js

@@ -0,0 +1,4 @@
+// Optional CSS imports - import this file if you need the design system styles
+import './app.css';
+// Re-export is not needed for CSS files
+// CSS files don't have named exports to re-export

package/dist/tailwind-safelist.d.ts

@@ -0,0 +1,28 @@
+export const textColors: string[];
+export const iconColors: string[];
+export const backgroundColors: string[];
+export const borders: string[];
+export const shadows: string[];
+export const textSizes: string[];
+export const fonts: string[];
+export const badges: string[];
+export const tooltips: string[];
+export const sizes: string[];
+export const display: string[];
+export const rounded: string[];
+export const tables: string[];
+export const leading: string[];
+export const flexLayout: string[];
+export const spacing: string[];
+export const sizing: string[];
+export const positioning: string[];
+export const cursors: string[];
+export const misc: string[];
+export const daisyui: string[];
+export const hoverVariants: string[];
+export const focusVariants: string[];
+export const disabledVariants: string[];
+export const activeVariants: string[];
+export const groupVariants: string[];
+export const safelist: string[];
+export const responsive: string[];

package/dist/tailwind-safelist.js

@@ -0,0 +1,491 @@
+// Used to safelist classnames so we can add styles dynamic.
+// This should include all the values used in the design system.
+// Read more here: https://daisyui.com/blog/most-common-mistake-when-using-tailwind-css/
+
+export const textColors = [
+  'text-primary',
+  'text-primary-inverse',
+  'text-secondary',
+  'text-secondary-inverse',
+  'text-tertiary',
+  'text-tertiary-inverse',
+  'text-accent',
+  'text-success',
+  'text-warning',
+  'text-danger',
+];
+
+export const iconColors = [
+  'text-icon-primary',
+  'text-icon-primary-inverse',
+  'text-icon-secondary',
+  'text-icon-tertiary',
+  'text-icon-accent',
+  'text-icon-success',
+  'text-icon-warning',
+  'text-icon-danger',
+  'text-icon-blue',
+  'text-icon-orange',
+  'text-icon-sky',
+];
+
+export const backgroundColors = [
+  'bg-surface',
+  'bg-surface-secondary',
+  'bg-base',
+  'bg-base-inverse',
+  'bg-neutral',
+  'bg-neutral-hover',
+  'bg-neutral-darker',
+  'bg-neutral-darker-hover',
+  'bg-neutral-inverse',
+  'bg-neutral-inverse-hover',
+  'bg-accent',
+  'bg-accent-hover',
+  'bg-accent-inverse',
+  'bg-accent-inverse-hover',
+  'bg-success',
+  'bg-success-hover',
+  'bg-success-inverse',
+  'bg-success-inverse-hover',
+  'bg-warning',
+  'bg-warning-hover',
+  'bg-warning-inverse',
+  'bg-warning-inverse-hover',
+  'bg-danger',
+  'bg-danger-hover',
+  'bg-danger-inverse',
+  'bg-danger-inverse-hover',
+  'bg-blue',
+  'bg-blue-hover',
+  'bg-blue-inverse',
+  'bg-orange',
+  'bg-orange-hover',
+  'bg-orange-inverse',
+  'bg-orange-inverse-hover',
+  'bg-sky',
+  'bg-sky-hover',
+  'bg-sky-inverse',
+  'bg-sky-inverse-hover',
+  'bg-pink-inverse',
+  'bg-lime-inverse',
+];
+
+export const borders = [
+  'border-static',
+  'border-interactive',
+  'border-hover',
+  'border-focus',
+  'border-danger',
+  'border-input',
+  'border-transparent',
+  'border-blue-inverse',
+  'border-orange-inverse',
+  'border-pink-inverse',
+  'border-lime-inverse',
+  'border-neutral-light',
+];
+
+export const shadows = [
+  'shadow',
+  'shadow-none',
+  'shadow-menu',
+  'shadow-nav',
+  'shadow-calendar',
+  'shadow-container',
+  'shadow-panel',
+  'shadow-input',
+  'shadow-outline',
+  'shadow-focus',
+];
+
+export const textSizes = [
+  'text-xxs',
+  'text-xs',
+  'text-sm',
+  'text-md',
+  'text-lg',
+  'text-xl',
+  'text-2xl',
+  'text-3xl',
+  'text-4xl',
+];
+
+export const fonts = ['font-medium', 'font-semibold', 'font-bold', 'font-normal'];
+
+export const badges = [
+  'badge-neutral',
+  'badge-success',
+  'badge-warning',
+  'badge-progress',
+  'badge-error',
+  'badge-md',
+  'badge-sm',
+];
+
+export const tooltips = ['tooltip-top', 'tooltip-right', 'tooltip-bottom', 'tooltip-left'];
+
+export const sizes = ['h-5', 'w-5', 'min-w-5', 'h-7', 'w-7', 'min-w-7'];
+
+export const display = [
+  'flex',
+  'grow',
+  'items-center',
+  'justify-center',
+  'flex-row',
+  'flex-col',
+  'px-0.5',
+  'px-2',
+  'py-1',
+];
+
+export const rounded = [
+  'rounded',
+  'rounded-full',
+  'rounded-lg',
+  'rounded-xl',
+  'rounded-2xl',
+  'rounded-md',
+];
+
+export const tables = ['table-fixed', 'table-auto'];
+
+export const leading = ['leading-4', 'leading-5', 'leading-6', 'leading-7'];
+
+export const flexLayout = [
+  'flex',
+  'inline-flex',
+  'block',
+  'inline-block',
+  'items-center',
+  'items-start',
+  'items-end',
+  'justify-center',
+  'justify-between',
+  'justify-start',
+  'justify-end',
+  'flex-1',
+  'flex-row',
+  'flex-col',
+  'text-left',
+  'text-right',
+  'text-center',
+  'text-base',
+  'gap-1',
+  'gap-1.5',
+  'gap-2',
+  'gap-3',
+  'gap-4',
+  'space-x-1',
+  'space-x-2',
+  'space-x-3',
+  'space-x-4',
+  'space-y-1',
+  'space-y-2',
+  'space-y-3',
+  'space-y-4',
+];
+
+export const spacing = [
+  'p-1',
+  'p-2',
+  'p-3',
+  'p-4',
+  'px-0',
+  'px-2',
+  'px-3',
+  'px-5',
+  'px-6',
+  'py-0',
+  'py-1',
+  'py-2',
+  'py-3',
+  'py-4',
+  'py-12',
+  'mb-2',
+];
+
+export const sizing = [
+  'h-4',
+  'h-5',
+  'h-6',
+  'h-7',
+  'h-8',
+  'h-10',
+  'h-11',
+  'h-12',
+  'h-16',
+  'h-28',
+  'h-screen',
+  'w-0.5',
+  'w-4',
+  'w-5',
+  'w-6',
+  'w-7',
+  'w-8',
+  'w-10',
+  'w-full',
+  'min-w-5',
+  'min-w-7',
+  'size-4',
+  'size-5',
+  'size-6',
+  'sm:w-[460px]',
+];
+
+export const positioning = ['absolute', 'relative', 'top-20', 'left-18', 'z-10', 'z-[1]'];
+
+export const cursors = ['cursor-pointer', 'cursor-wait', 'cursor-default'];
+
+export const misc = [
+  'overflow-hidden',
+  'overflow-x-auto',
+  'duration-150',
+  'active:red',
+  'active:bg-neutral',
+  'active:bg-neutral-inverse',
+  '[&>*>.control-button]:flex-col',
+  '[&>svg]:w-4',
+  '[&>svg]:h-4',
+  '[&>svg]:w-5',
+  '[&>svg]:h-5',
+];
+
+// Setting all daisyui classes here so we can add them to the safelist
+export const daisyui = [
+  // Actions
+  'btn',
+  'btn-primary',
+  'btn-secondary',
+  'btn-accent',
+  'btn-info',
+  'btn-success',
+  'btn-warning',
+  'btn-error',
+  'btn-ghost',
+  'btn-link',
+  'btn-outline',
+  'btn-active',
+  'btn-disabled',
+  'btn-lg',
+  'btn-md',
+  'btn-sm',
+  'btn-xs',
+  'btn-circle',
+  'btn-square',
+
+  // Dropdown
+  'dropdown',
+  'dropdown-content',
+  'dropdown-end',
+  'dropdown-top',
+  'dropdown-bottom',
+  'dropdown-left',
+  'dropdown-right',
+  'dropdown-hover',
+  'dropdown-open',
+
+  // Modal
+  'modal',
+  'modal-box',
+  'modal-action',
+  'modal-backdrop',
+  'modal-open',
+  'modal-toggle',
+
+  // Data Display
+  'avatar',
+  'avatar-group',
+  'badge',
+  'badge-primary',
+  'badge-secondary',
+  'badge-accent',
+  'badge-outline',
+  'card',
+  'card-title',
+  'card-body',
+  'card-actions',
+  'carousel',
+  'carousel-item',
+  'collapse',
+  'collapse-title',
+  'collapse-content',
+  'table',
+  'table-zebra',
+  'table-pin-rows',
+  'table-pin-cols',
+
+  // Navigation
+  'menu',
+  'menu-title',
+  'menu-dropdown',
+  'menu-horizontal',
+  'menu-vertical',
+  'navbar',
+  'navbar-start',
+  'navbar-center',
+  'navbar-end',
+  'tabs',
+  'tab',
+  'tab-active',
+  'tab-disabled',
+
+  // Feedback
+  'alert',
+  'alert-info',
+  'alert-success',
+  'alert-warning',
+  'alert-error',
+  'loading',
+  'skeleton',
+  'progress',
+  'radial-progress',
+  'toast',
+  'toast-start',
+  'toast-center',
+  'toast-end',
+  'tooltip',
+  'tooltip-open',
+
+  // Data Input
+  'checkbox',
+  'checkbox-primary',
+  'checkbox-secondary',
+  'checkbox-accent',
+  'input',
+  'input-bordered',
+  'input-primary',
+  'input-secondary',
+  'input-accent',
+  'input-error',
+  'input-disabled',
+  'input-lg',
+  'input-md',
+  'input-sm',
+  'input-xs',
+  'radio',
+  'radio-primary',
+  'radio-secondary',
+  'radio-accent',
+  'range',
+  'range-primary',
+  'range-secondary',
+  'range-accent',
+  'select',
+  'select-bordered',
+  'select-primary',
+  'select-secondary',
+  'select-accent',
+  'toggle',
+  'toggle-primary',
+  'toggle-secondary',
+  'toggle-accent',
+
+  // Layout
+  'drawer',
+  'drawer-toggle',
+  'drawer-content',
+  'drawer-side',
+  'drawer-overlay',
+  'drawer-end',
+  'footer',
+  'footer-title',
+  'footer-center',
+  'hero',
+  'hero-content',
+  'hero-overlay',
+  'indicator',
+  'indicator-item',
+  'indicator-start',
+  'indicator-center',
+  'indicator-end',
+  'divider',
+  'divider-horizontal',
+  'divider-vertical',
+  'join',
+  'join-item',
+  'stack',
+];
+
+// Add hover variants
+export const hoverVariants = [
+  'hover:bg-neutral',
+  'hover:bg-neutral-hover',
+  'hover:bg-neutral-darker-hover',
+  'hover:bg-neutral-inverse-hover',
+  'hover:bg-accent-hover',
+  'hover:bg-accent-inverse-hover',
+  'hover:bg-success-hover',
+  'hover:bg-success-inverse-hover',
+  'hover:bg-warning-hover',
+  'hover:bg-warning-inverse-hover',
+  'hover:bg-danger-hover',
+  'hover:bg-danger-inverse-hover',
+  'hover:bg-blue-hover',
+  'hover:bg-orange-hover',
+  'hover:bg-orange-inverse-hover',
+  'hover:bg-sky-hover',
+  'hover:bg-sky-inverse-hover',
+];
+
+// Add focus variants
+export const focusVariants = [
+  'focus:outline-none',
+  'focus:ring-2',
+  'focus:ring-offset-2',
+  'focus:border-focus',
+  'focus-visible:outline-none',
+  'focus-visible:ring-2',
+];
+
+// Add disabled variants
+export const disabledVariants = [
+  'disabled:bg-neutral',
+  'disabled:opacity-50',
+  'disabled:cursor-not-allowed',
+  'disabled:text-tertiary',
+  'disabled:border-none',
+];
+
+// Add active variants
+export const activeVariants = [
+  'active:bg-neutral',
+  'active:bg-neutral-inverse',
+  'active:red',
+  'active:scale-95',
+  'active:transform',
+];
+
+// Add group variants
+export const groupVariants = ['group-first:invisible', 'group-last:invisible'];
+
+// Export all arrays as a single safelist
+export const safelist = [
+  ...textColors,
+  ...iconColors,
+  ...backgroundColors,
+  ...borders,
+  ...shadows,
+  ...textSizes,
+  ...fonts,
+  ...badges,
+  ...tooltips,
+  ...sizes,
+  ...display,
+  ...rounded,
+  ...tables,
+  ...flexLayout,
+  ...spacing,
+  ...sizing,
+  ...positioning,
+  ...cursors,
+  ...misc,
+  ...daisyui,
+  ...hoverVariants,
+  ...focusVariants,
+  ...disabledVariants,
+  ...activeVariants,
+  ...groupVariants,
+];
+
+export const responsive = ['sm:w-[460px]', 'md:flex', 'lg:block', 'sm:gap-2'];

package/dist/tailwind.d.ts

@@ -0,0 +1,11 @@
+import type { Tailwindest } from 'tailwindest';
+export type Overflow = Tailwindest['overflow'];
+export type Width = Tailwindest['width'];
+export type MinWidth = Tailwindest['minWidth'];
+export type Height = Tailwindest['height'];
+export type MaxHeight = Tailwindest['maxHeight'];
+export type Margin = Tailwindest['margin'];
+export type Padding = Tailwindest['padding'];
+export type JustifyContent = Tailwindest['justifyContent'];
+export type Rounding = Tailwindest['borderRadius'];
+export type ButtonVariant = 'btn-neutral' | 'btn-primary' | 'btn-secondary' | 'btn-accent' | 'btn-info' | 'btn-success' | 'btn-warning' | 'btn-error' | 'btn-ghost' | 'btn-link' | 'btn-outline' | 'btn-active' | 'btn-disabled';

package/dist/tailwind.js

@@ -0,0 +1 @@
+export {};