@solibo/solibo-ui 0.5.11 → 0.5.12

package/dist/index.d.ts

@@ -80,12 +80,6 @@ declare const brandingSVG: {
 
 export declare function Button({ children, className, disabled, icon, onClick, ref, variant, ...props }: ButtonProps): JSX.Element;
 
-export declare const ButtonGroup: ({ children, className, ...props }: ButtonGroupProps) => JSX.Element | null;
-
-declare type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode;
-};
-
 declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
     children: React.ReactNode;
     className?: string;
@@ -109,6 +103,14 @@ declare type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
+export declare const Chip: ({ accessibleLabel, label, onClick, ...props }: ChipProps) => JSX.Element;
+
+declare type ChipProps = Omit<ComponentPropsWithoutRef<'span'>, 'onClick' | 'tabIndex'> & {
+    accessibleLabel?: string;
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+};
+
 export declare const Collapsible: ({ children, disabled, label }: CollapsibleProps) => JSX.Element;
 
 declare type CollapsibleProps = {
@@ -117,10 +119,11 @@ declare type CollapsibleProps = {
     label?: default_2.ReactNode;
 };
 
-export declare const Controls: ({ children, onSaveShortcut, ...props }: ControlsProps) => JSX.Element;
+export declare const Controls: ({ children, className, variant, ...props }: ControlsProps) => JSX.Element | null;
 
-declare type ControlsProps = React.ComponentPropsWithoutRef<'menu'> & {
-    onSaveShortcut?: () => void;
+declare type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    variant?: keyof typeof variants_5;
 };
 
 export declare const Croppable: ({ children, fill, height, image, label, onCroppableChange, onFileChange, onImageChange, onTransformChange, transform, standalone, }: CroppableProps) => JSX.Element;
@@ -151,7 +154,7 @@ declare type DefaultCardProps = BaseCardProps & {
     children?: React.ReactNode;
     header?: React.ReactNode;
     image?: React.ReactNode;
-    imagePosition?: 'top' | 'left' | 'right';
+    imagePosition?: 'top' | 'left';
     variant?: 'default';
 };
 
@@ -257,7 +260,7 @@ export declare const Header: ({ children, variant }: HeaderProps) => JSX.Element
 
 declare type HeaderProps = {
     children: React.ReactNode;
-    variant?: keyof typeof variants_5;
+    variant?: keyof typeof variants_6;
 };
 
 export declare const Icon: ({ fill, gap, name, size, variant, }: IconProps) => JSX.Element;
@@ -266,6 +269,10 @@ declare type IconName = keyof typeof iconPaths;
 
 declare const iconPaths: {
     bold: string;
+    bookmark: {
+        filled: string;
+        outline: string;
+    };
     buildings: string;
     card: string;
     check: string;
@@ -311,6 +318,10 @@ declare const iconPaths: {
     trash: string;
     updown: string;
     upload: string;
+    unbookmark: {
+        filled: string;
+        outline: string;
+    };
     user: string;
     x: string;
 };
@@ -320,7 +331,7 @@ declare type IconProps = {
     gap?: 'left' | 'none' | 'right';
     name: IconName;
     size?: keyof typeof sizes;
-    variant?: keyof typeof variants_6;
+    variant?: keyof typeof variants_7;
 };
 
 declare function Image_2({ fadeDurationMs, showOnError, onLoad, onError, style, ...props }: ImageProps): JSX.Element;
@@ -391,12 +402,13 @@ declare type MenuProps = {
     triggerAccessibleLabel?: string;
 };
 
-export declare const Message: ({ content, id, preview, type }: MessageOptions) => JSX.Element;
+export declare const Message: ({ content, iconName, id, preview, type, }: MessageOptions) => JSX.Element;
 
 declare type MessageItem = MessageOptions;
 
 export declare type MessageOptions = {
     content: React.ReactNode;
+    iconName?: IconName;
     id: string;
     preview?: boolean;
     type?: 'default' | 'minimal' | 'system' | 'user';
@@ -436,7 +448,7 @@ declare type NavProps = React.HTMLAttributes<HTMLElement> & {
     children?: React.ReactNode;
     className?: string;
     horizontal?: boolean;
-    variant?: keyof typeof variants_7;
+    variant?: keyof typeof variants_8;
 };
 
 declare const Object_2: ({ accessibleLabel, url, ...props }: ObjectProps) => JSX.Element;
@@ -591,17 +603,22 @@ declare const variants_4: {
 
 declare const variants_5: {
     default: string;
-    jumbo: string;
+    fixed: string;
 };
 
 declare const variants_6: {
+    default: string;
+    jumbo: string;
+};
+
+declare const variants_7: {
     danger: string;
     default: string;
     primary: string;
     white: string;
 };
 
-declare const variants_7: {
+declare const variants_8: {
     default: string;
     pills: string;
     tabs: string;

package/dist/index.js

@@ -5,12 +5,12 @@ import { Croppable as a } from "./components/_croppable/index.js";
 import { Dropdown as i } from "./components/_dropdown/index.js";
 import { Dropzone as s } from "./components/_dropzone/index.js";
 import { Editor as d } from "./components/_editor/index.js";
-import { Menu as u } from "./components/_menu/index.js";
+import { Menu as c } from "./components/_menu/index.js";
 import { Messages as T } from "./components/_messages/index.js";
-import { Portal as C } from "./components/_portal/index.js";
+import { Portal as A } from "./components/_portal/index.js";
 import { Sortable as F } from "./components/_sortable/index.js";
-import { Toasts as k } from "./components/_toasts/index.js";
-import { Widget as D } from "./components/_widget/index.js";
+import { Toasts as h } from "./components/_toasts/index.js";
+import { Widget as v } from "./components/_widget/index.js";
 import { Accordion as I } from "./components/accordion/index.js";
 import { AppLink as S } from "./components/app-link/index.js";
 import { Aside as P } from "./components/aside/index.js";
@@ -18,8 +18,8 @@ import { Badge as w } from "./components/badge/index.js";
 import { Banner as E } from "./components/banner/index.js";
 import { Branding as N } from "./components/branding/index.js";
 import { Button as W } from "./components/button/index.js";
-import { ButtonGroup as y } from "./components/button-group/index.js";
-import { Checkbox as K } from "./components/checkbox/index.js";
+import { Checkbox as y } from "./components/checkbox/index.js";
+import { Chip as K } from "./components/chip/index.js";
 import { Controls as R } from "./components/controls/index.js";
 import { Dialog as V } from "./components/dialog/index.js";
 import { Figure as Y } from "./components/figure/index.js";
@@ -32,14 +32,14 @@ import { Header as ao } from "./components/header/index.js";
 import { Icon as io } from "./components/icon/index.js";
 import { Image as so } from "./components/image/index.js";
 import { Input as bo } from "./components/input/index.js";
-import { Link as co } from "./components/link/index.js";
-import { List as Bo } from "./components/list/index.js";
-import { Loading as Ao } from "./components/loading/index.js";
+import { Link as Co } from "./components/link/index.js";
+import { List as uo } from "./components/list/index.js";
+import { Loading as Bo } from "./components/loading/index.js";
 import { Message as Lo } from "./components/message/index.js";
-import { Nav as vo } from "./components/nav/index.js";
-import { Object as Go } from "./components/object/index.js";
+import { Nav as ko } from "./components/nav/index.js";
+import { Object as Do } from "./components/object/index.js";
 import { Popover as Mo } from "./components/popover/index.js";
-import { S as ho } from "./index-BDTbPD0V.js";
+import { S as Go } from "./index-DvABhnD0.js";
 import { Table as jo } from "./components/table/index.js";
 import { Textarea as zo } from "./components/textarea/index.js";
 import { Toast as Ho } from "./components/toast/index.js";
@@ -54,9 +54,9 @@ import './assets/index.css';export {
   E as Banner,
   N as Branding,
   W as Button,
-  y as ButtonGroup,
   p as Card,
-  K as Checkbox,
+  y as Checkbox,
+  K as Chip,
   x as Collapsible,
   R as Controls,
   a as Croppable,
@@ -74,24 +74,24 @@ import './assets/index.css';export {
   io as Icon,
   so as Image,
   bo as Input,
-  co as Link,
-  Bo as List,
-  Ao as Loading,
-  u as Menu,
+  Co as Link,
+  uo as List,
+  Bo as Loading,
+  c as Menu,
   Lo as Message,
   T as Messages,
-  vo as Nav,
-  Go as Object,
+  ko as Nav,
+  Do as Object,
   Mo as Popover,
-  C as Portal,
-  ho as Select,
+  A as Portal,
+  Go as Select,
   F as Sortable,
   jo as Table,
   zo as Textarea,
   Ho as Toast,
-  k as Toasts,
+  h as Toasts,
   Oo as Toggle,
   qo as Toolbar,
-  D as Widget
+  v as Widget
 };
 //# sourceMappingURL=index.js.map

package/dist/tokens.css

@@ -1,6 +1,16 @@
 /* generated by `pnpm tokens:build` 🥷 */
 
 :root {
+  --colors-blue-100: #c9dcff;
+  --colors-blue-200: var(--colors-new-brand-blue);
+  --colors-blue-300: #6695ff;
+  --colors-blue-400: #296afa;
+  --colors-blue-50: var(--colors-new-brand-light-blue);
+  --colors-blue-500: #0b4ad5;
+  --colors-blue-600: #0c3797;
+  --colors-blue-700: #0c2764;
+  --colors-blue-800: #0b1938;
+  --colors-blue-900: #090e1b;
   --colors-box-shadow: #0000001f;
   --colors-green-100: #b0c8c2;
   --colors-green-200: #8aaea5;
@@ -23,6 +33,14 @@
   --colors-neutral-700: #2a2a2a;
   --colors-neutral-800: #1c1c1c;
   --colors-neutral-900: #0b0b0b;
+  --colors-new-brand-blue: #abc5ff;
+  --colors-new-brand-dark-green: #202b1b;
+  --colors-new-brand-light-blue: #e8f1ff;
+  --colors-new-brand-light-yellow: #f8fac0;
+  --colors-new-brand-nature-white: #f7f7e1;
+  --colors-new-brand-shadow-green: #263821;
+  --colors-new-brand-shadow-yellow: #7d8233;
+  --colors-new-brand-yellow: #cde517;
   --colors-orange-100: #fdd7b0;
   --colors-orange-200: #fbc48a;
   --colors-orange-300: #faa954;
@@ -57,6 +75,7 @@
   --colors-semantic-bg-overlay: var(--colors-neutral-100);
   --colors-semantic-bg-page: var(--colors-neutral-50);
   --colors-semantic-bg-surface: var(--colors-neutral-0);
+  --colors-semantic-border-active: var(--colors-neutral-800);
   --colors-semantic-border-default: var(--colors-neutral-200);
   --colors-semantic-border-disabled: var(--colors-neutral-100);
   --colors-semantic-border-focus: var(--colors-purple-500);
@@ -64,6 +83,7 @@
   --colors-semantic-border-strong: var(--colors-neutral-300);
   --colors-semantic-border-subtle: var(--colors-neutral-100);
   --colors-semantic-content-disabled: var(--colors-neutral-300);
+  --colors-semantic-content-highlight: var(--colors-purple-100);
   --colors-semantic-content-link: var(--colors-purple-600);
   --colors-semantic-content-link-hover: var(--colors-purple-700);
   --colors-semantic-content-link-visited: var(--colors-purple-400);
@@ -79,6 +99,8 @@
   --colors-semantic-interactive-hover-subtle: var(--colors-neutral-100);
   --colors-semantic-interactive-neutral: var(--colors-neutral-300);
   --colors-semantic-interactive-pressed: var(--colors-purple-100);
+  --colors-semantic-interactive-secondary-bg: var(--colors-neutral-100);
+  --colors-semantic-interactive-secondary-hover: var(--colors-neutral-200);
   --colors-semantic-interactive-selected: var(--colors-purple-50);
   --colors-semantic-primary-on-primary: var(--colors-neutral-0);
   --colors-semantic-primary-on-primary-subtle: var(--colors-purple-700);
@@ -88,17 +110,31 @@
   --colors-semantic-primary-primary-subtle: var(--colors-purple-50);
   --colors-semantic-primary-primary-subtle-border: var(--colors-purple-200);
   --colors-semantic-status-error-bg: var(--colors-red-50);
-  --colors-semantic-status-error-border: var(--colors-red-500);
-  --colors-semantic-status-error-content: var(--colors-red-700);
+  --colors-semantic-status-error-border: var(--colors-red-300);
+  --colors-semantic-status-error-content: var(--colors-red-800);
   --colors-semantic-status-error-content-inverse: var(--colors-neutral-0);
-  --colors-semantic-status-success-bg: var(--colors-green-50);
-  --colors-semantic-status-success-border: var(--colors-green-200);
+  --colors-semantic-status-info-bg: var(--colors-blue-50);
+  --colors-semantic-status-info-border: var(--colors-blue-300);
+  --colors-semantic-status-info-content: var(--colors-blue-800);
+  --colors-semantic-status-info-content-inverse: var(--colors-neutral-0);
+  --colors-semantic-status-success-bg: var(--colors-green-100);
+  --colors-semantic-status-success-border: var(--colors-green-300);
   --colors-semantic-status-success-content: var(--colors-green-800);
   --colors-semantic-status-success-content-inverse: var(--colors-neutral-0);
   --colors-semantic-status-warning-bg: var(--colors-orange-50);
-  --colors-semantic-status-warning-border: var(--colors-orange-200);
+  --colors-semantic-status-warning-border: var(--colors-orange-300);
   --colors-semantic-status-warning-content: var(--colors-orange-800);
   --colors-semantic-status-warning-content-inverse: var(--colors-neutral-0);
+  --colors-solibo-green-100: #d9e0d7;
+  --colors-solibo-green-200: #b8c7b3;
+  --colors-solibo-green-300: #90aa88;
+  --colors-solibo-green-400: #698c5f;
+  --colors-solibo-green-50: #eff1ee;
+  --colors-solibo-green-500: #4a6344;
+  --colors-solibo-green-600: var(--colors-new-brand-shadow-green);
+  --colors-solibo-green-700: var(--colors-new-brand-dark-green);
+  --colors-solibo-green-800: #151b13;
+  --colors-solibo-green-900: #0c0f0b;
   --colors-translucent: #fff9;
   --font-base: 'Figtree';
   --font-font-weight-bold: 700;
@@ -176,8 +212,8 @@
   --typography-font-sizes-body-md: var(--scale-16);
   --typography-font-sizes-body-sm: var(--scale-14);
   --typography-font-sizes-caption: var(--scale-12);
-  --typography-font-sizes-display-lg: var(--scale-56);
-  --typography-font-sizes-display-sm: var(--scale-48);
+  --typography-font-sizes-display-lg: var(--scale-48);
+  --typography-font-sizes-display-sm: var(--scale-40);
   --typography-font-sizes-h1: var(--scale-28);
   --typography-font-sizes-h2: var(--scale-24);
   --typography-font-sizes-h3: var(--scale-20);
@@ -202,12 +238,14 @@
   --colors-semantic-bg-overlay: var(--colors-neutral-600);
   --colors-semantic-bg-page: var(--colors-neutral-900);
   --colors-semantic-bg-surface: var(--colors-neutral-700);
+  --colors-semantic-border-active: var(--colors-neutral-50);
   --colors-semantic-border-default: var(--colors-neutral-500);
   --colors-semantic-border-disabled: var(--colors-neutral-700);
   --colors-semantic-border-focus: var(--colors-purple-400);
   --colors-semantic-border-on-color: var(--colors-neutral-400);
   --colors-semantic-border-subtle: var(--colors-neutral-600);
   --colors-semantic-content-disabled: var(--colors-neutral-500);
+  --colors-semantic-content-highlight: var(--colors-purple-700);
   --colors-semantic-content-link: var(--colors-purple-200);
   --colors-semantic-content-link-hover: var(--colors-purple-300);
   --colors-semantic-content-primary: var(--colors-neutral-50);
@@ -218,6 +256,8 @@
   --colors-semantic-interactive-hover-subtle: var(--colors-neutral-600);
   --colors-semantic-interactive-neutral: var(--colors-neutral-400);
   --colors-semantic-interactive-pressed: var(--colors-purple-700);
+  --colors-semantic-interactive-secondary-bg: var(--colors-neutral-600);
+  --colors-semantic-interactive-secondary-hover: var(--colors-neutral-500);
   --colors-semantic-interactive-selected: var(--colors-purple-900);
   --colors-semantic-primary-on-primary-subtle: var(--colors-purple-200);
   --colors-semantic-primary-primary: var(--colors-purple-300);
@@ -225,9 +265,9 @@
   --colors-semantic-primary-primary-hover: var(--colors-purple-200);
   --colors-semantic-primary-primary-subtle: var(--colors-purple-800);
   --colors-semantic-primary-primary-subtle-border: var(--colors-purple-600);
-  --colors-semantic-status-error-bg: var(--colors-red-100);
-  --colors-semantic-status-error-border: var(--colors-red-300);
-  --colors-semantic-status-error-content: var(--colors-red-800);
+  --colors-semantic-status-error-bg: var(--colors-red-200);
+  --colors-semantic-status-info-bg: ;
+  --colors-semantic-status-info-border: var(--colors-blue-400);
   --colors-semantic-status-success-bg: var(--colors-green-200);
   --colors-semantic-status-success-border: var(--colors-green-400);
   --colors-semantic-status-warning-bg: var(--colors-orange-200);
@@ -238,13 +278,10 @@
 @media (width <= 960px) {
   :root {
     --typography-font-sizes-body-lg: var(--scale-16);
-    --typography-font-sizes-display-lg: var(--scale-48);
-    --typography-font-sizes-display-sm: var(--scale-40);
+    --typography-font-sizes-display-lg: var(--scale-40);
+    --typography-font-sizes-display-sm: var(--scale-32);
     --typography-font-sizes-h1: var(--scale-24);
     --typography-font-sizes-h2: var(--scale-20);
     --typography-font-sizes-h3: var(--scale-18);
-    --typography-font-sizes-h4: var(--scale-18);
-    --typography-font-sizes-label-lg: var(--scale-14);
-    --typography-font-sizes-label-sm: var(--scale-12);
   }
 }