@pathscale/ui 1.4.0 → 1.6.0

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

@@ -12,6 +12,8 @@ export type FlexProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLElemen
     gap?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     gapX?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     gapY?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    paddingInline?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    paddingBlock?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     grow?: ResponsiveProp<boolean>;
     shrink?: ResponsiveProp<boolean>;
     basis?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;

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

@@ -19,13 +19,15 @@ const __solidLayoutFlex = (_stable, p)=>{
         "gap",
         "gapX",
         "gapY",
+        "paddingInline",
+        "paddingBlock",
         "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.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.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

@@ -47,6 +47,20 @@ export declare const CLASSES: {
         readonly lg: "gap-y-6";
         readonly xl: "gap-y-8";
     };
+    readonly paddingInline: {
+        readonly none: "px-0";
+        readonly sm: "px-2";
+        readonly md: "px-4";
+        readonly lg: "px-6";
+        readonly xl: "px-8";
+    };
+    readonly paddingBlock: {
+        readonly none: "py-0";
+        readonly sm: "py-2";
+        readonly md: "py-4";
+        readonly lg: "py-6";
+        readonly xl: "py-8";
+    };
     readonly grow: {
         readonly true: "flex-grow";
         readonly false: "flex-grow-0";

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

@@ -48,6 +48,20 @@ const CLASSES = {
         lg: "gap-y-6",
         xl: "gap-y-8"
     },
+    paddingInline: {
+        none: "px-0",
+        sm: "px-2",
+        md: "px-4",
+        lg: "px-6",
+        xl: "px-8"
+    },
+    paddingBlock: {
+        none: "py-0",
+        sm: "py-2",
+        md: "py-4",
+        lg: "py-6",
+        xl: "py-8"
+    },
     grow: {
         true: "flex-grow",
         false: "flex-grow-0"

package/dist/components/text/Text.css

@@ -5,6 +5,10 @@
       --color-muted,
       color-mix(in oklab, var(--color-base-content) 55%, transparent)
     );
+    --text-color-subtle: var(
+      --color-subtle,
+      color-mix(in oklab, var(--color-base-content) 40%, transparent)
+    );
     --text-color-success: var(--color-success);
     --text-color-warning: var(--color-warning);
     --text-color-danger: var(--color-danger);
@@ -52,6 +56,10 @@
     --text-color: var(--text-color-muted);
   }
 
+  .text[data-variant="subtle"] {
+    --text-color: var(--text-color-subtle);
+  }
+
   .text[data-variant="success"] {
     --text-color: var(--text-color-success);
   }
@@ -63,4 +71,77 @@
   .text[data-variant="danger"] {
     --text-color: var(--text-color-danger);
   }
+
+  .text[data-weight="normal"] {
+    font-weight: 400;
+  }
+
+  .text[data-weight="medium"] {
+    font-weight: 500;
+  }
+
+  .text[data-weight="semibold"] {
+    font-weight: 600;
+  }
+
+  .text[data-weight="bold"] {
+    font-weight: 700;
+  }
+
+  .text[data-transform="none"] {
+    text-transform: none;
+  }
+
+  .text[data-transform="uppercase"] {
+    text-transform: uppercase;
+  }
+
+  .text[data-transform="lowercase"] {
+    text-transform: lowercase;
+  }
+
+  .text[data-transform="capitalize"] {
+    text-transform: capitalize;
+  }
+
+  .text[data-tracking="normal"] {
+    letter-spacing: normal;
+  }
+
+  .text[data-tracking="wide"] {
+    letter-spacing: 0.04em;
+  }
+
+  .text[data-leading="none"] {
+    line-height: 1;
+  }
+
+  .text[data-family="body"] {
+    font-family: var(--font-body, var(--font-sans, inherit));
+  }
+
+  .text[data-family="heading"] {
+    font-family: var(--font-heading, var(--font-sans, inherit));
+  }
+
+  .text[data-family="display"] {
+    font-family: var(
+      --font-display,
+      var(--font-heading, var(--font-sans, inherit))
+    );
+  }
+
+  .text[data-family="mono"] {
+    font-family: var(
+      --font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    );
+  }
 }

package/dist/components/text/Text.generated.d.ts

@@ -3,10 +3,20 @@ import "./Text.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type TextSize = "xs" | "sm" | "base" | "lg" | "xl";
-export type TextVariant = "default" | "muted" | "success" | "warning" | "danger";
+export type TextVariant = "default" | "muted" | "subtle" | "success" | "warning" | "danger";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
+export type TextTracking = "normal" | "wide";
+export type TextLeading = "normal" | "none";
+export type TextFamily = "body" | "heading" | "display" | "mono";
 export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> & IComponentBaseProps & {
     size?: TextSize;
     variant?: TextVariant;
+    weight?: TextWeight;
+    transform?: TextTransform;
+    tracking?: TextTracking;
+    leading?: TextLeading;
+    family?: TextFamily;
     children?: JSX.Element;
 };
 declare const TextRoot: __LayoutComponent<TextRootProps>;

package/dist/components/text/Text.generated.js

@@ -13,7 +13,12 @@ const __solidLayoutTextRoot = (_stable, p)=>{
         "dataTheme",
         "style",
         "size",
-        "variant"
+        "variant",
+        "weight",
+        "transform",
+        "tracking",
+        "leading",
+        "family"
     ]);
     const size = ()=>local.size ?? "base";
     const variant = ()=>local.variant ?? "default";
@@ -29,6 +34,21 @@ const __solidLayoutTextRoot = (_stable, p)=>{
             get ["data-variant"] () {
                 return variant();
             },
+            get ["data-weight"] () {
+                return local.weight;
+            },
+            get ["data-transform"] () {
+                return local.transform;
+            },
+            get ["data-tracking"] () {
+                return local.tracking;
+            },
+            get ["data-leading"] () {
+                return local.leading;
+            },
+            get ["data-family"] () {
+                return local.family;
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },

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

@@ -1 +1 @@
-export { default, Text, TextRoot, type TextProps, type TextRootProps, type TextSize, type TextVariant, } from "./Text.generated";
+export { default, Text, TextRoot, type TextProps, type TextRootProps, type TextSize, type TextVariant, type TextWeight, type TextTransform, type TextTracking, type TextLeading, type TextFamily, } from "./Text.generated";

package/dist/index.d.ts

@@ -161,7 +161,7 @@ export type { TagGroupProps, TagGroupRootProps, TagGroupListProps, TagSelectionM
 export { default as Tabs } from "./components/tabs";
 export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabSeparatorProps, TabPanelProps, } from "./components/tabs";
 export { default as Text, TextRoot } from "./components/text";
-export type { TextProps, TextRootProps, TextSize, TextVariant, } from "./components/text";
+export type { TextProps, TextRootProps, TextSize, TextVariant, TextWeight, TextTransform, TextTracking, TextLeading, TextFamily, } from "./components/text";
 export { default as TextField, TextFieldRoot, TextFieldContext, } from "./components/text-field";
 export type { TextFieldProps, TextFieldRootProps, TextFieldVariant, TextFieldRenderProps, TextFieldContextValue, } from "./components/text-field";
 export { default as TextArea, TextAreaRoot } from "./components/text-area";

package/dist/layouts.manifest.json

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

package/dist/purge-manifest.json

@@ -8912,6 +8912,20 @@
             "lg": [],
             "xl": []
           },
+          "paddingInline": {
+            "none": [],
+            "sm": [],
+            "md": [],
+            "lg": [],
+            "xl": []
+          },
+          "paddingBlock": {
+            "none": [],
+            "sm": [],
+            "md": [],
+            "lg": [],
+            "xl": []
+          },
           "grow": {
             "true": [],
             "false": []
@@ -16234,29 +16248,61 @@
         "byProp": {}
       },
       "attributeSelectors": [
+        "[data-family=\"body\"]",
+        "[data-family=\"display\"]",
+        "[data-family=\"heading\"]",
+        "[data-family=\"mono\"]",
+        "[data-leading=\"none\"]",
         "[data-size=\"base\"]",
         "[data-size=\"lg\"]",
         "[data-size=\"sm\"]",
         "[data-size=\"xl\"]",
         "[data-size=\"xs\"]",
+        "[data-tracking=\"normal\"]",
+        "[data-tracking=\"wide\"]",
+        "[data-transform=\"capitalize\"]",
+        "[data-transform=\"lowercase\"]",
+        "[data-transform=\"none\"]",
+        "[data-transform=\"uppercase\"]",
         "[data-variant=\"danger\"]",
         "[data-variant=\"default\"]",
         "[data-variant=\"muted\"]",
+        "[data-variant=\"subtle\"]",
         "[data-variant=\"success\"]",
-        "[data-variant=\"warning\"]"
+        "[data-variant=\"warning\"]",
+        "[data-weight=\"bold\"]",
+        "[data-weight=\"medium\"]",
+        "[data-weight=\"normal\"]",
+        "[data-weight=\"semibold\"]"
       ],
       "selectors": [
         ".text",
+        ".text[data-family=\"body\"]",
+        ".text[data-family=\"display\"]",
+        ".text[data-family=\"heading\"]",
+        ".text[data-family=\"mono\"]",
+        ".text[data-leading=\"none\"]",
         ".text[data-size=\"base\"]",
         ".text[data-size=\"lg\"]",
         ".text[data-size=\"sm\"]",
         ".text[data-size=\"xl\"]",
         ".text[data-size=\"xs\"]",
+        ".text[data-tracking=\"normal\"]",
+        ".text[data-tracking=\"wide\"]",
+        ".text[data-transform=\"capitalize\"]",
+        ".text[data-transform=\"lowercase\"]",
+        ".text[data-transform=\"none\"]",
+        ".text[data-transform=\"uppercase\"]",
         ".text[data-variant=\"danger\"]",
         ".text[data-variant=\"default\"]",
         ".text[data-variant=\"muted\"]",
+        ".text[data-variant=\"subtle\"]",
         ".text[data-variant=\"success\"]",
-        ".text[data-variant=\"warning\"]"
+        ".text[data-variant=\"warning\"]",
+        ".text[data-weight=\"bold\"]",
+        ".text[data-weight=\"medium\"]",
+        ".text[data-weight=\"normal\"]",
+        ".text[data-weight=\"semibold\"]"
       ],
       "cssVars": {
         "declared": [
@@ -16264,6 +16310,7 @@
           "--text-color-danger",
           "--text-color-default",
           "--text-color-muted",
+          "--text-color-subtle",
           "--text-color-success",
           "--text-color-warning",
           "--text-font-size",
@@ -16274,12 +16321,19 @@
           "--color-danger",
           "--color-foreground",
           "--color-muted",
+          "--color-subtle",
           "--color-success",
           "--color-warning",
+          "--font-body",
+          "--font-display",
+          "--font-heading",
+          "--font-mono",
+          "--font-sans",
           "--text-color",
           "--text-color-danger",
           "--text-color-default",
           "--text-color-muted",
+          "--text-color-subtle",
           "--text-color-success",
           "--text-color-warning",
           "--text-font-size",
@@ -32258,6 +32312,36 @@
           "TextField"
         ]
       },
+      {
+        "selector": ".text[data-family=\"body\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-family=\"display\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-family=\"heading\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-family=\"mono\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-leading=\"none\"]",
+        "components": [
+          "Text"
+        ]
+      },
       {
         "selector": ".text[data-size=\"base\"]",
         "components": [
@@ -32288,6 +32372,42 @@
           "Text"
         ]
       },
+      {
+        "selector": ".text[data-tracking=\"normal\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-tracking=\"wide\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-transform=\"capitalize\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-transform=\"lowercase\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-transform=\"none\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-transform=\"uppercase\"]",
+        "components": [
+          "Text"
+        ]
+      },
       {
         "selector": ".text[data-variant=\"danger\"]",
         "components": [
@@ -32306,6 +32426,12 @@
           "Text"
         ]
       },
+      {
+        "selector": ".text[data-variant=\"subtle\"]",
+        "components": [
+          "Text"
+        ]
+      },
       {
         "selector": ".text[data-variant=\"success\"]",
         "components": [
@@ -32318,6 +32444,30 @@
           "Text"
         ]
       },
+      {
+        "selector": ".text[data-weight=\"bold\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-weight=\"medium\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-weight=\"normal\"]",
+        "components": [
+          "Text"
+        ]
+      },
+      {
+        "selector": ".text[data-weight=\"semibold\"]",
+        "components": [
+          "Text"
+        ]
+      },
       {
         "selector": ".textarea",
         "components": [
@@ -37205,7 +37355,8 @@
       "--font-sans": {
         "declaredBy": [],
         "referencedBy": [
-          "Kbd"
+          "Kbd",
+          "Text"
         ]
       },
       "--color-link": {
@@ -38220,6 +38371,14 @@
           "Text"
         ]
       },
+      "--text-color-subtle": {
+        "declaredBy": [
+          "Text"
+        ],
+        "referencedBy": [
+          "Text"
+        ]
+      },
       "--text-color-success": {
         "declaredBy": [
           "Text"
@@ -38252,6 +38411,36 @@
           "Text"
         ]
       },
+      "--color-subtle": {
+        "declaredBy": [],
+        "referencedBy": [
+          "Text"
+        ]
+      },
+      "--font-body": {
+        "declaredBy": [],
+        "referencedBy": [
+          "Text"
+        ]
+      },
+      "--font-display": {
+        "declaredBy": [],
+        "referencedBy": [
+          "Text"
+        ]
+      },
+      "--font-heading": {
+        "declaredBy": [],
+        "referencedBy": [
+          "Text"
+        ]
+      },
+      "--font-mono": {
+        "declaredBy": [],
+        "referencedBy": [
+          "Text"
+        ]
+      },
       "--progress-circle-stroke": {
         "declaredBy": [
           "ProgressCircle"

package/package.json

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