@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/src/tokens/elevation.ts

@@ -0,0 +1,12 @@
+export const elevation = {
+  raise1: "0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",
+  raise2: "0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",
+  raise3: "0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)",
+} as const;
+
+export const borderRadius = {
+  control: "8px",
+  lg: "8px",
+  md: "6px",
+  sm: "4px",
+} as const;

package/src/tokens/index.ts

@@ -0,0 +1,4 @@
+export * from "./colors";
+export * from "./semantic";
+export * from "./typography";
+export * from "./elevation";

package/src/tokens/semantic.ts

@@ -0,0 +1,89 @@
+/** Semantic design tokens mapped to CSS custom properties */
+export const semanticTokens = {
+  action: {
+    primary: {
+      idle: "var(--action-primary-idle)",
+      onIdle: "var(--action-primary-on-idle)",
+      hover: "var(--action-primary-hover)",
+      onHover: "var(--action-primary-on-hover)",
+      disabled: "var(--action-primary-disabled)",
+      onDisabled: "var(--action-primary-on-disabled)",
+    },
+    secondary: {
+      idle: "var(--action-secondary-idle)",
+      onIdle: "var(--action-secondary-on-idle)",
+      hover: "var(--action-secondary-hover)",
+      onHover: "var(--action-secondary-on-hover)",
+      disabled: "var(--action-secondary-disabled)",
+      onDisabled: "var(--action-secondary-on-disabled)",
+    },
+    tertiary: {
+      idle: "var(--action-tertiary-idle)",
+      onIdle: "var(--action-tertiary-on-idle)",
+      hover: "var(--action-tertiary-hover)",
+      onHover: "var(--action-tertiary-on-hover)",
+      disabled: "var(--action-tertiary-disabled)",
+      onDisabled: "var(--action-tertiary-on-disabled)",
+    },
+    quaternary: {
+      idle: "var(--action-quaternary-idle)",
+      onIdle: "var(--action-quaternary-on-idle)",
+      hover: "var(--action-quaternary-hover)",
+      onHover: "var(--action-quaternary-on-hover)",
+      disabled: "var(--action-quaternary-disabled)",
+      onDisabled: "var(--action-quaternary-on-disabled)",
+    },
+    destructive: {
+      idle: "var(--action-destructive-idle)",
+      onIdle: "var(--action-destructive-on-idle)",
+      hover: "var(--action-destructive-hover)",
+      onHover: "var(--action-destructive-on-hover)",
+      disabled: "var(--action-destructive-disabled)",
+      onDisabled: "var(--action-destructive-on-disabled)",
+    },
+  },
+  background: {
+    primary: "var(--background-primary)",
+    secondary: "var(--background-secondary)",
+    tertiary: "var(--background-tertiary)",
+    hover: "var(--background-hover)",
+    selected: "var(--background-selected)",
+    overlay: "var(--background-overlay)",
+  },
+  display: {
+    onLight: {
+      primary: "var(--display-on-light-primary)",
+      secondary: "var(--display-on-light-secondary)",
+      tertiary: "var(--display-on-light-tertiary)",
+      quaternary: "var(--display-on-light-quaternary)",
+    },
+    onDark: {
+      primary: "var(--display-on-dark-primary)",
+      secondary: "var(--display-on-dark-secondary)",
+      tertiary: "var(--display-on-dark-tertiary)",
+      quaternary: "var(--display-on-dark-quaternary)",
+    },
+  },
+  accent: {
+    onLight: "var(--accent-on-light)",
+    onDark: "var(--accent-on-dark)",
+    bgLight: "var(--accent-bg-light)",
+    bgLighter: "var(--accent-bg-lighter)",
+  },
+  divider: {
+    primary: "var(--divider-primary)",
+    secondary: "var(--divider-secondary)",
+  },
+  meta: {
+    green: "var(--meta-green)",
+    onGreen: "var(--meta-on-green)",
+    orange: "var(--meta-orange)",
+    onOrange: "var(--meta-on-orange)",
+    red: "var(--meta-red)",
+    onRed: "var(--meta-on-red)",
+    blue: "var(--meta-blue)",
+    onBlue: "var(--meta-on-blue)",
+    purple: "var(--meta-purple)",
+    onPurple: "var(--meta-on-purple)",
+  },
+} as const;

package/src/tokens/typography.ts

@@ -0,0 +1,21 @@
+export const fontFamilies = {
+  heading: ['"TRY Vesterbro"', "Georgia", "serif"],
+  body: ['"Matter-TRIAL"', "system-ui", "sans-serif"],
+  mono: ['"Roboto Mono"', "monospace"],
+} as const;
+
+export const fontSizes = {
+  title: { size: "28px", lineHeight: "34px", letterSpacing: "-0.02em", weight: 400 },
+  "title-em": { size: "28px", lineHeight: "34px", letterSpacing: "-0.02em", weight: 500 },
+  heading: { size: "22px", lineHeight: "28px", letterSpacing: "0", weight: 500 },
+  subheader: { size: "18px", lineHeight: "28px", letterSpacing: "-0.01em", weight: 400 },
+  "subheader-em": { size: "18px", lineHeight: "28px", letterSpacing: "-0.01em", weight: 500 },
+  body: { size: "16px", lineHeight: "24px", letterSpacing: "-0.01em", weight: 400 },
+  "body-em": { size: "16px", lineHeight: "24px", letterSpacing: "-0.01em", weight: 500 },
+  "caption-1": { size: "16px", lineHeight: "22px", letterSpacing: "0.02em", weight: 400 },
+  "caption-1-em": { size: "16px", lineHeight: "22px", letterSpacing: "0.02em", weight: 500 },
+  "caption-2": { size: "14px", lineHeight: "20px", letterSpacing: "0.01em", weight: 400 },
+  "caption-2-em": { size: "14px", lineHeight: "20px", letterSpacing: "0.01em", weight: 500 },
+  footnote: { size: "13px", lineHeight: "17px", letterSpacing: "0", weight: 400 },
+  "footnote-em": { size: "13px", lineHeight: "17px", letterSpacing: "0", weight: 500 },
+} as const;

package/dist/components/HelloWorld.d.ts

@@ -1 +0,0 @@
-export declare const HelloWorld: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputPrompt.d.ts

@@ -1,20 +0,0 @@
-import { IconButton } from '@material-tailwind/react';
-import { ReactNode } from 'react';
-import { default as TextareaAutosize } from 'react-textarea-autosize';
-interface SubmitButtonProps extends React.ComponentProps<typeof IconButton> {
-    tooltipContent?: string;
-    className?: string;
-}
-export declare const SubmitButton: React.FC<SubmitButtonProps>;
-interface TextareaProps extends React.ComponentProps<typeof TextareaAutosize> {
-    onSubmit?: () => void;
-}
-export declare const Textarea: React.FC<TextareaProps>;
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    bottom?: ReactNode;
-    right?: ReactNode;
-    top?: ReactNode;
-    textArea?: ReactNode;
-}
-export declare const Container: React.FC<ContainerProps>;
-export {};

package/dist/components/SearchModal.d.ts

@@ -1,24 +0,0 @@
-export declare const formatDateReport: (date: string | Date) => string;
-export interface SearchItem {
-    id: string;
-    title: string;
-    subtitle?: string;
-    icon?: React.ReactNode;
-    metadata?: Record<string, any>;
-}
-export interface SearchModalProps {
-    open: boolean;
-    onClose: () => void;
-    items?: SearchItem[];
-    loading?: boolean;
-    placeholder?: string;
-    onSearch?: (query: string) => void;
-    onSelect?: (item: SearchItem) => void;
-    filterOptions?: string[];
-    selectedFilter?: string;
-    onFilterChange?: (filter: string) => void;
-    recentlyViewedLabel?: string;
-    noResultsText?: string;
-}
-declare const SearchModal: ({ open, onClose, items, loading, placeholder, onSearch, onSelect, filterOptions, selectedFilter, onFilterChange, recentlyViewedLabel, noResultsText, }: SearchModalProps) => import("react/jsx-runtime").JSX.Element;
-export default SearchModal;

package/dist/components/Sidebar/Button.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    children?: ReactNode;
-    icon?: ReactNode;
-}
-export declare const Button: ({ icon, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Sidebar/Container.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-}
-export declare const Container: ({ className, children, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/Item.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-    icon?: ReactNode;
-    isActive?: boolean;
-    trailing?: ReactNode;
-}
-export declare const Item: ({ children, className, icon, isActive, trailing, ...props }: ItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Sidebar/Layout.d.ts

@@ -1,10 +0,0 @@
-import { ContainerProps } from './Container';
-import { ReactNode } from 'react';
-interface LayoutProps extends ContainerProps {
-    isCollapsed?: boolean;
-    sideContainer?: ReactNode;
-    sideClassName?: string;
-    onSwitchLayout?: (isCollapsed: boolean) => void;
-}
-export declare const Layout: ({ className, children, isCollapsed, sideContainer, sideClassName, onSwitchLayout, ...props }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Sidebar/Provider.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-export declare const collapsedContext: import('react').Context<{
-    isCollapsed: boolean;
-    toggleCollapsed: () => void;
-    isHovered: boolean;
-    setIsHovered: (value: boolean) => void;
-} | undefined>;
-interface ProviderProps {
-    children: ReactNode;
-    isCollapsed?: boolean;
-    onSwitchLayout?: (isCollapsed: boolean) => void;
-}
-export declare const Provider: ({ children, isCollapsed: controlledIsCollapsed, onSwitchLayout, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Sidebar/SecondaryItem.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-interface SecondaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-    icon?: ReactNode;
-    isActive?: boolean;
-    trailing?: ReactNode;
-}
-export declare const SecondaryItem: ({ children, className, isActive, trailing, icon, ...props }: SecondaryItemProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Sidebar/SideContainer.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export interface SideContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
-}
-export declare const SideContainer: ({ className, children, ...props }: SideContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/ToggleCollapseButton.d.ts

@@ -1 +0,0 @@
-export declare const ToggleCollapseButton: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Sidebar/index.d.ts

@@ -1,8 +0,0 @@
-export { Provider } from './Provider';
-export { Container } from './Container';
-export { SideContainer } from './SideContainer';
-export { Layout } from './Layout';
-export { Button } from './Button';
-export { ToggleCollapseButton } from './ToggleCollapseButton';
-export { Item } from './Item';
-export { SecondaryItem } from './SecondaryItem';

package/dist/components/icons/CloseSidebarIcon.d.ts

@@ -1,2 +0,0 @@
-import { default as React } from 'react';
-export default function CloseSidebarIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/CloseSidebarMidIcon.d.ts

@@ -1 +0,0 @@
-export default function CloseSidebarMidIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/ExpandIcon.d.ts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-declare const ExpandIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-export default ExpandIcon;

package/dist/components/icons/SendArrowIcon.d.ts

@@ -1,4 +0,0 @@
-export default function SendArrowIcon({ className, size }: {
-    className?: string | undefined;
-    size?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/SendArrowIconGreen.d.ts

@@ -1,4 +0,0 @@
-export default function SendArrowIconGreen({ className, size }: {
-    className?: string | undefined;
-    size?: string | undefined;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/SettingsIcon.d.ts

@@ -1,3 +0,0 @@
-export declare const SettingsIcon: ({ ...props }: {
-    [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/XIcon.d.ts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-declare const XIcon: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-export default XIcon;