@shape-digital-env/shape-ui 0.0.2 → 0.0.3

package/lib/i18n.d.ts

@@ -0,0 +1,8 @@
+export declare const SHAPE_UI_NS = "shape_ui";
+/**
+ * Translates the lib's own default text (accessible names, generic labels)
+ * from the `shape_ui` namespace. The English `defaultValue` keeps the text
+ * readable in apps that haven't registered the namespace.
+ */
+export declare function useShapeUiT(): (key: string, defaultValue: string, options?: Record<string, unknown>) => string;
+//# sourceMappingURL=i18n.d.ts.map

package/lib/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/lib/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,aAAa,CAAC;AAEtC;;;;GAIG;AACH,wBAAgB,WAAW,UAGlB,MAAM,gBACG,MAAM,YACV,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,MAAM,CACV"}

package/lib/useSvgId.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Prefix for the ids inside an inline SVG (gradients, masks, clip paths), so
+ * two copies of the same logo on a page don't point at each other's
+ * definitions. React's id has punctuation (colons in 18, `«»` in 19), which is
+ * dropped to keep `url(#…)` references valid everywhere.
+ */
+export declare function useSvgId(): string;
+//# sourceMappingURL=useSvgId.d.ts.map

package/lib/useSvgId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSvgId.d.ts","sourceRoot":"","sources":["../../src/lib/useSvgId.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,QAAQ,IAAI,MAAM,CAEjC"}

package/locales/en/common.i18n.d.ts

@@ -0,0 +1,19 @@
+export declare const i18nCommon: {
+    loading: string;
+    close: string;
+    dismiss: string;
+    cancel: string;
+    confirm: string;
+    clear_filters: string;
+    pagination: string;
+    previous: string;
+    next: string;
+    select_date_range: string;
+    untitled: string;
+    error: string;
+    step_of: string;
+    shape_logo: string;
+    logo: string;
+    logo_of: string;
+};
+//# sourceMappingURL=common.i18n.d.ts.map

package/locales/en/common.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/en/common.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;CAiBtB,CAAC"}

package/locales/en/index.d.ts

@@ -1,4 +1,22 @@
 export declare const shapeUiEn: {
+    common: {
+        loading: string;
+        close: string;
+        dismiss: string;
+        cancel: string;
+        confirm: string;
+        clear_filters: string;
+        pagination: string;
+        previous: string;
+        next: string;
+        select_date_range: string;
+        untitled: string;
+        error: string;
+        step_of: string;
+        shape_logo: string;
+        logo: string;
+        logo_of: string;
+    };
     field: {
         required: string;
     };
@@ -58,6 +76,7 @@ export declare const shapeUiEn: {
             selectAllRows: string;
         };
         expand: {
+            header: string;
             expandRow: string;
             collapseRow: string;
         };

package/locales/en/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/locales/en/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/locales/en/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKrB,CAAC"}

package/locales/en/table.i18n.d.ts

@@ -30,6 +30,7 @@ export declare const i18nTable: {
         selectAllRows: string;
     };
     expand: {
+        header: string;
         expandRow: string;
         collapseRow: string;
     };

package/locales/en/table.i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/en/table.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAC"}
+{"version":3,"file":"table.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/en/table.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAC"}

package/locales/es/common.i18n.d.ts

@@ -0,0 +1,19 @@
+export declare const i18nCommon: {
+    loading: string;
+    close: string;
+    dismiss: string;
+    cancel: string;
+    confirm: string;
+    clear_filters: string;
+    pagination: string;
+    previous: string;
+    next: string;
+    select_date_range: string;
+    untitled: string;
+    error: string;
+    step_of: string;
+    shape_logo: string;
+    logo: string;
+    logo_of: string;
+};
+//# sourceMappingURL=common.i18n.d.ts.map

package/locales/es/common.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/es/common.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;CAiBtB,CAAC"}

package/locales/es/index.d.ts

@@ -1,4 +1,22 @@
 export declare const shapeUiEs: {
+    common: {
+        loading: string;
+        close: string;
+        dismiss: string;
+        cancel: string;
+        confirm: string;
+        clear_filters: string;
+        pagination: string;
+        previous: string;
+        next: string;
+        select_date_range: string;
+        untitled: string;
+        error: string;
+        step_of: string;
+        shape_logo: string;
+        logo: string;
+        logo_of: string;
+    };
     field: {
         required: string;
     };
@@ -58,6 +76,7 @@ export declare const shapeUiEs: {
             selectAllRows: string;
         };
         expand: {
+            header: string;
             expandRow: string;
             collapseRow: string;
         };

package/locales/es/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/locales/es/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/locales/es/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKrB,CAAC"}

package/locales/es/table.i18n.d.ts

@@ -30,6 +30,7 @@ export declare const i18nTable: {
         selectAllRows: string;
     };
     expand: {
+        header: string;
         expandRow: string;
         collapseRow: string;
     };

package/locales/es/table.i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/es/table.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAC"}
+{"version":3,"file":"table.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/es/table.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAC"}

package/locales/pt-br/common.i18n.d.ts

@@ -0,0 +1,19 @@
+export declare const i18nCommon: {
+    loading: string;
+    close: string;
+    dismiss: string;
+    cancel: string;
+    confirm: string;
+    clear_filters: string;
+    pagination: string;
+    previous: string;
+    next: string;
+    select_date_range: string;
+    untitled: string;
+    error: string;
+    step_of: string;
+    shape_logo: string;
+    logo: string;
+    logo_of: string;
+};
+//# sourceMappingURL=common.i18n.d.ts.map

package/locales/pt-br/common.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/pt-br/common.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;CAiBtB,CAAC"}

package/locales/pt-br/index.d.ts

@@ -1,4 +1,22 @@
 export declare const shapeUiPtBr: {
+    common: {
+        loading: string;
+        close: string;
+        dismiss: string;
+        cancel: string;
+        confirm: string;
+        clear_filters: string;
+        pagination: string;
+        previous: string;
+        next: string;
+        select_date_range: string;
+        untitled: string;
+        error: string;
+        step_of: string;
+        shape_logo: string;
+        logo: string;
+        logo_of: string;
+    };
     field: {
         required: string;
     };
@@ -58,6 +76,7 @@ export declare const shapeUiPtBr: {
             selectAllRows: string;
         };
         expand: {
+            header: string;
             expandRow: string;
             collapseRow: string;
         };

package/locales/pt-br/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/locales/pt-br/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/locales/pt-br/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKvB,CAAC"}

package/locales/pt-br/table.i18n.d.ts

@@ -30,6 +30,7 @@ export declare const i18nTable: {
         selectAllRows: string;
     };
     expand: {
+        header: string;
         expandRow: string;
         collapseRow: string;
     };

package/locales/pt-br/table.i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/pt-br/table.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CrB,CAAC"}
+{"version":3,"file":"table.i18n.d.ts","sourceRoot":"","sources":["../../../src/locales/pt-br/table.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shape-digital-env/shape-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Shape Digital's React design system — components, tokens and styles.",
   "type": "module",
   "main": "./index.js",
@@ -44,6 +44,9 @@
     "@radix-ui/react-switch": "^1.2.2",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.1.0",
+    "@shape/table-core": "*",
+    "@tanstack/react-table": "^8.13.2",
+    "@tanstack/react-virtual": "3.0.4",
     "i18next": ">=23",
     "react": ">=18",
     "react-dom": ">=18",

package/styles.css

@@ -8,6 +8,7 @@
       "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-50: #ff5050;
     --color-red-100: #e43030;
     --color-red-200: #a02020;
     --color-yellow-100: #ffa000;
@@ -92,6 +93,7 @@
     --color-gray-f7: rgba(255, 255, 255, 0.07);
     --size-indicator-h: var(--stroke-width-xs);
     --size-tabs-h: var(--spacing-12);
+    --spacing-xl: var(--spacing-8);
     --spacing-lg: var(--spacing-6);
     --spacing-md: var(--spacing-4);
     --spacing-sm: var(--spacing-2);
@@ -291,6 +293,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -324,9 +329,6 @@
   .bottom-0 {
     bottom: 0px;
   }
-  .bottom-full {
-    bottom: 100%;
-  }
   .left-0 {
     left: 0px;
   }
@@ -381,12 +383,12 @@
   .mx-0\.5 {
     margin-inline: calc(var(--spacing) * 0.5);
   }
-  .my-0 {
-    margin-block: 0px;
-  }
   .my-1 {
     margin-block: var(--spacing-1);
   }
+  .mt-0 {
+    margin-top: 0px;
+  }
   .mt-2 {
     margin-top: var(--spacing-2);
   }
@@ -402,9 +404,6 @@
   .mb-6 {
     margin-bottom: var(--spacing-6);
   }
-  .mb-\[3px\] {
-    margin-bottom: 3px;
-  }
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
@@ -500,6 +499,9 @@
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
+  .h-10 {
+    height: var(--spacing-10);
+  }
   .h-12 {
     height: var(--spacing-12);
   }
@@ -515,9 +517,15 @@
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-60 {
+    height: calc(var(--spacing) * 60);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -605,12 +613,18 @@
   .w-8 {
     width: var(--spacing-8);
   }
+  .w-10 {
+    width: var(--spacing-10);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -632,6 +646,9 @@
   .w-120 {
     width: calc(var(--spacing) * 120);
   }
+  .w-170 {
+    width: calc(var(--spacing) * 170);
+  }
   .w-210 {
     width: calc(var(--spacing) * 210);
   }
@@ -641,12 +658,6 @@
   .w-320 {
     width: calc(var(--spacing) * 320);
   }
-  .w-\[80px\] {
-    width: 80px;
-  }
-  .w-\[680px\] {
-    width: 680px;
-  }
   .w-auto {
     width: auto;
   }
@@ -659,12 +670,24 @@
   .w-max {
     width: max-content;
   }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
   .max-w-50 {
     max-width: calc(var(--spacing) * 50);
   }
   .max-w-56 {
     max-width: calc(var(--spacing) * 56);
   }
+  .max-w-60 {
+    max-width: calc(var(--spacing) * 60);
+  }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
+  .max-w-160 {
+    max-width: calc(var(--spacing) * 160);
+  }
   .max-w-\[100vw\] {
     max-width: 100vw;
   }
@@ -677,6 +700,9 @@
   .max-w-none {
     max-width: none;
   }
+  .max-w-xl {
+    max-width: var(--spacing-xl);
+  }
   .min-w-\(--radix-select-trigger-width\) {
     min-width: var(--radix-select-trigger-width);
   }
@@ -786,6 +812,9 @@
   .appearance-none {
     appearance: none;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -852,10 +881,8 @@
   .gap-xs {
     gap: var(--spacing-xs);
   }
-  :where(.space-y-4 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
-    margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
+  .self-start {
+    align-self: flex-start;
   }
   .truncate {
     overflow: hidden;
@@ -871,6 +898,9 @@
   .overflow-visible {
     overflow: visible;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -926,19 +956,12 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .border-blue-100 {
     border-color: var(--color-blue-100);
   }
   .border-border-strong {
     border-color: var(--color-border-strong);
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
@@ -984,8 +1007,8 @@
   .bg-current {
     background-color: currentcolor;
   }
-  .bg-feedback-error {
-    background-color: var(--color-feedback-error);
+  .bg-feedback-error-dark {
+    background-color: var(--color-feedback-error-dark);
   }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
@@ -1283,12 +1306,12 @@
   .text-feedback-warning-150 {
     color: var(--color-feedback-warning-150);
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
+  .text-red-50 {
+    color: var(--color-red-50);
+  }
   .text-red-100 {
     color: var(--color-red-100);
   }
@@ -1428,6 +1451,10 @@
   .placeholder\:text-gray-500::placeholder {
     color: var(--color-gray-500);
   }
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   :is(.\*\:last\:border-b-0 > *):last-child {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
@@ -1451,8 +1478,13 @@
     .hover\:bg-blue-250:hover {
       background-color: var(--color-blue-250);
     }
-    .hover\:bg-feedback-error-dark:hover {
-      background-color: var(--color-feedback-error-dark);
+    .hover\:bg-feedback-error-dark\/80:hover {
+      background-color: color-mix(in srgb, #a02020 80%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-feedback-error-dark\/80:hover {
+        background-color: color-mix(in oklab, var(--color-feedback-error-dark) 80%, transparent);
+      }
     }
     .hover\:bg-gray-300:hover {
       background-color: var(--color-gray-300);
@@ -1466,9 +1498,6 @@
     .hover\:text-blue-150:hover {
       color: var(--color-blue-150);
     }
-    .hover\:text-red-100:hover {
-      color: var(--color-red-100);
-    }
     .hover\:text-white:hover {
       color: var(--color-white);
     }
@@ -1482,9 +1511,6 @@
   .focus-visible\:rounded-sm:focus-visible {
     border-radius: var(--radius-sm);
   }
-  .focus-visible\:border-white:focus-visible {
-    border-color: var(--color-white);
-  }
   .focus-visible\:bg-gray-f7:focus-visible {
     background-color: var(--color-gray-f7);
   }
@@ -1535,8 +1561,8 @@
   .active\:bg-blue-200:active {
     background-color: var(--color-blue-200);
   }
-  .active\:bg-feedback-error:active {
-    background-color: var(--color-feedback-error);
+  .active\:bg-feedback-error-dark:active {
+    background-color: var(--color-feedback-error-dark);
   }
   .active\:text-blue-100:active {
     color: var(--color-blue-100);
@@ -1698,6 +1724,12 @@
   .data-\[state\=unchecked\]\:data-highlighted\:bg-gray-f7[data-state="unchecked"][data-highlighted] {
     background-color: var(--color-gray-f7);
   }
+  .data-\[vertical\=true\]\:h-24[data-vertical="true"] {
+    height: calc(var(--spacing) * 24);
+  }
+  .data-\[vertical\=true\]\:flex-row[data-vertical="true"] {
+    flex-direction: row;
+  }
   @media (width >= 80rem) {
     .xl\:h-9 {
       height: calc(var(--spacing) * 9);
@@ -1900,11 +1932,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -2111,7 +2138,6 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;

package/components/Tabs/Tabs.figma.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const CompoundAPI: Story;
-export declare const WithStatus: Story;
-export declare const Disabled: Story;
-//# sourceMappingURL=Tabs.figma.d.ts.map

package/components/Tabs/Tabs.figma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.figma.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.figma.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC"}