@pathscale/ui 2.0.0 → 2.1.1

package/dist/components/flex/Flex.generated.d.ts

@@ -14,6 +14,10 @@ export type FlexProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLElemen
     gapY?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     paddingInline?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     paddingBlock?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    width?: ResponsiveProp<"full">;
+    height?: ResponsiveProp<"full">;
+    minWidth?: ResponsiveProp<"zero">;
+    minHeight?: ResponsiveProp<"zero">;
     grow?: ResponsiveProp<boolean>;
     shrink?: ResponsiveProp<boolean>;
     basis?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;

package/dist/components/flex/Flex.generated.js

@@ -21,13 +21,17 @@ const __solidLayoutFlex = (_stable, p)=>{
         "gapY",
         "paddingInline",
         "paddingBlock",
+        "width",
+        "height",
+        "minWidth",
+        "minHeight",
         "grow",
         "shrink",
         "basis"
     ]);
     const tag = createMemo(()=>local.as || "div");
     const resolvedChildren = children(()=>local.children);
-    const classes = createMemo(()=>twMerge(clsx(CLASSES.base, mapResponsiveProp(local.direction, CLASSES.direction), mapResponsiveProp(local.justify, CLASSES.justify), mapResponsiveProp(local.align, CLASSES.align), mapResponsiveProp(local.wrap, CLASSES.wrap), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.gapX, CLASSES.gapX), mapResponsiveProp(local.gapY, CLASSES.gapY), mapResponsiveProp(local.paddingInline, CLASSES.paddingInline), mapResponsiveProp(local.paddingBlock, CLASSES.paddingBlock), mapResponsiveProp(local.grow, CLASSES.grow), mapResponsiveProp(local.shrink, CLASSES.shrink), mapResponsiveProp(local.basis, CLASSES.basis), local.class, local.className)));
+    const classes = createMemo(()=>twMerge(clsx(CLASSES.base, mapResponsiveProp(local.direction, CLASSES.direction), mapResponsiveProp(local.justify, CLASSES.justify), mapResponsiveProp(local.align, CLASSES.align), mapResponsiveProp(local.wrap, CLASSES.wrap), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.gapX, CLASSES.gapX), mapResponsiveProp(local.gapY, CLASSES.gapY), mapResponsiveProp(local.paddingInline, CLASSES.paddingInline), mapResponsiveProp(local.paddingBlock, CLASSES.paddingBlock), mapResponsiveProp(local.width, CLASSES.width), mapResponsiveProp(local.height, CLASSES.height), mapResponsiveProp(local.minWidth, CLASSES.minWidth), mapResponsiveProp(local.minHeight, CLASSES.minHeight), mapResponsiveProp(local.grow, CLASSES.grow), mapResponsiveProp(local.shrink, CLASSES.shrink), mapResponsiveProp(local.basis, CLASSES.basis), local.class, local.className)));
     return createComponent(Dynamic, mergeProps({
         get component () {
             return tag();

package/dist/components/flex/Flex.recipe.d.ts

@@ -61,6 +61,18 @@ export declare const CLASSES: {
         readonly lg: "py-6";
         readonly xl: "py-8";
     };
+    readonly width: {
+        readonly full: "w-full";
+    };
+    readonly height: {
+        readonly full: "h-full";
+    };
+    readonly minWidth: {
+        readonly zero: "min-w-0";
+    };
+    readonly minHeight: {
+        readonly zero: "min-h-0";
+    };
     readonly grow: {
         readonly true: "flex-grow";
         readonly false: "flex-grow-0";

package/dist/components/flex/Flex.recipe.js

@@ -62,6 +62,18 @@ const CLASSES = {
         lg: "py-6",
         xl: "py-8"
     },
+    width: {
+        full: "w-full"
+    },
+    height: {
+        full: "h-full"
+    },
+    minWidth: {
+        zero: "min-w-0"
+    },
+    minHeight: {
+        zero: "min-h-0"
+    },
     grow: {
         true: "flex-grow",
         false: "flex-grow-0"

package/dist/components/tag/Tag.css

@@ -1,5 +1,5 @@
 @layer components {
-  .tag {
+  .tag:not(.token) {
     --tag-optical-offset: 0.031em;
 
     position: relative;
@@ -23,7 +23,10 @@
     --tag-fg-default: var(--color-default-foreground);
     --tag-bg-default-hover: var(--color-default-hover);
     --tag-bg-surface: var(--color-surface, var(--color-base-200));
-    --tag-fg-surface: var(--color-surface-foreground, var(--color-base-content));
+    --tag-fg-surface: var(
+      --color-surface-foreground,
+      var(--color-base-content)
+    );
     --tag-bg-surface-hover: var(--color-surface-hover, var(--color-base-300));
     --tag-bg-selected: var(--color-accent-soft);
     --tag-fg-selected: var(--color-accent-soft-foreground);
@@ -49,27 +52,32 @@
     height: 0.75rem;
   }
 
-  .tag:is([data-disabled="true"], [aria-disabled="true"]) {
+  .tag:not(.token):is([data-disabled="true"], [aria-disabled="true"]) {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  .tag:is(:focus-visible, [data-focus-visible]) {
+  .tag:not(.token):is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid var(--color-accent);
     outline-offset: 2px;
   }
 
-  .tag:is([data-selected="true"], [aria-selected="true"]) {
+  .tag:not(.token):is([data-selected="true"], [aria-selected="true"]) {
     background-color: var(--tag-bg-selected);
     color: var(--tag-fg-selected);
   }
 
   @media (hover: hover) {
-    .tag:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+    .tag:not(.token):is(:hover, [data-hovered="true"]):not(
+        [data-selected="true"]
+      ):not([data-disabled="true"]) {
       background-color: var(--tag-bg-hover);
     }
 
-    .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) {
+    .tag:not(.token):is([data-selected="true"], [aria-selected="true"]):is(
+        :hover,
+        [data-hovered="true"]
+      ) {
       background-color: var(--tag-bg-selected-hover);
     }
   }

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/purge-manifest.json

@@ -1408,17 +1408,17 @@
         "[data-selected=\"true\"]"
       ],
       "selectors": [
-        ".tag",
         ".tag--default",
         ".tag--lg",
         ".tag--md",
         ".tag--sm",
         ".tag--surface",
-        ".tag:is(:focus-visible, [data-focus-visible])",
-        ".tag:is(:hover, [data-hovered=\"true\"]):not([data-selected=\"true\"]):not([data-disabled=\"true\"])",
-        ".tag:is([data-disabled=\"true\"], [aria-disabled=\"true\"])",
-        ".tag:is([data-selected=\"true\"], [aria-selected=\"true\"])",
-        ".tag:is([data-selected=\"true\"], [aria-selected=\"true\"]):is(:hover, [data-hovered=\"true\"])",
+        ".tag:not(.token)",
+        ".tag:not(.token):is(:focus-visible, [data-focus-visible])",
+        ".tag:not(.token):is(:hover, [data-hovered=\"true\"]):not([data-selected=\"true\"]):not([data-disabled=\"true\"])",
+        ".tag:not(.token):is([data-disabled=\"true\"], [aria-disabled=\"true\"])",
+        ".tag:not(.token):is([data-selected=\"true\"], [aria-selected=\"true\"])",
+        ".tag:not(.token):is([data-selected=\"true\"], [aria-selected=\"true\"]):is(:hover, [data-hovered=\"true\"])",
         ".tag__icon",
         ".tag__icon > *",
         ".tag__remove-button",
@@ -1494,17 +1494,17 @@
         "[data-selected=\"true\"]"
       ],
       "selectors": [
-        ".tag",
         ".tag--default",
         ".tag--lg",
         ".tag--md",
         ".tag--sm",
         ".tag--surface",
-        ".tag:is(:focus-visible, [data-focus-visible])",
-        ".tag:is(:hover, [data-hovered=\"true\"]):not([data-selected=\"true\"]):not([data-disabled=\"true\"])",
-        ".tag:is([data-disabled=\"true\"], [aria-disabled=\"true\"])",
-        ".tag:is([data-selected=\"true\"], [aria-selected=\"true\"])",
-        ".tag:is([data-selected=\"true\"], [aria-selected=\"true\"]):is(:hover, [data-hovered=\"true\"])",
+        ".tag:not(.token)",
+        ".tag:not(.token):is(:focus-visible, [data-focus-visible])",
+        ".tag:not(.token):is(:hover, [data-hovered=\"true\"]):not([data-selected=\"true\"]):not([data-disabled=\"true\"])",
+        ".tag:not(.token):is([data-disabled=\"true\"], [aria-disabled=\"true\"])",
+        ".tag:not(.token):is([data-selected=\"true\"], [aria-selected=\"true\"])",
+        ".tag:not(.token):is([data-selected=\"true\"], [aria-selected=\"true\"]):is(:hover, [data-hovered=\"true\"])",
         ".tag__icon",
         ".tag__icon > *",
         ".tag__remove-button",
@@ -8926,6 +8926,18 @@
             "lg": [],
             "xl": []
           },
+          "width": {
+            "full": []
+          },
+          "height": {
+            "full": []
+          },
+          "minWidth": {
+            "zero": []
+          },
+          "minHeight": {
+            "zero": []
+          },
           "grow": {
             "true": [],
             "false": []
@@ -32093,13 +32105,6 @@
           "Tabs"
         ]
       },
-      {
-        "selector": ".tag",
-        "components": [
-          "Tag.Root",
-          "Tag.slot"
-        ]
-      },
       {
         "selector": ".tag__icon",
         "components": [
@@ -32206,35 +32211,42 @@
         ]
       },
       {
-        "selector": ".tag:is(:focus-visible, [data-focus-visible])",
+        "selector": ".tag:not(.token)",
+        "components": [
+          "Tag.Root",
+          "Tag.slot"
+        ]
+      },
+      {
+        "selector": ".tag:not(.token):is(:focus-visible, [data-focus-visible])",
         "components": [
           "Tag.Root",
           "Tag.slot"
         ]
       },
       {
-        "selector": ".tag:is(:hover, [data-hovered=\"true\"]):not([data-selected=\"true\"]):not([data-disabled=\"true\"])",
+        "selector": ".tag:not(.token):is(:hover, [data-hovered=\"true\"]):not([data-selected=\"true\"]):not([data-disabled=\"true\"])",
         "components": [
           "Tag.Root",
           "Tag.slot"
         ]
       },
       {
-        "selector": ".tag:is([data-disabled=\"true\"], [aria-disabled=\"true\"])",
+        "selector": ".tag:not(.token):is([data-disabled=\"true\"], [aria-disabled=\"true\"])",
         "components": [
           "Tag.Root",
           "Tag.slot"
         ]
       },
       {
-        "selector": ".tag:is([data-selected=\"true\"], [aria-selected=\"true\"])",
+        "selector": ".tag:not(.token):is([data-selected=\"true\"], [aria-selected=\"true\"])",
         "components": [
           "Tag.Root",
           "Tag.slot"
         ]
       },
       {
-        "selector": ".tag:is([data-selected=\"true\"], [aria-selected=\"true\"]):is(:hover, [data-hovered=\"true\"])",
+        "selector": ".tag:not(.token):is([data-selected=\"true\"], [aria-selected=\"true\"]):is(:hover, [data-hovered=\"true\"])",
         "components": [
           "Tag.Root",
           "Tag.slot"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "author": "pathscale",
   "repository": {
     "type": "git",