@pathscale/ui 0.0.162 → 0.0.163

package/dist/indicator/indicator.css

@@ -0,0 +1,70 @@
+@layer components {
+  .indicator {
+      position: relative;
+      display: inline-flex;
+      width: max-content;
+    }
+
+  .indicator :where(.indicator-item) {
+      z-index: 1;
+      position: absolute;
+      white-space: nowrap;
+      top: var(--indicator-t, 0);
+      bottom: var(--indicator-b, auto);
+      left: var(--indicator-s, auto);
+      right: var(--indicator-e, 0);
+      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
+    }
+
+  .indicator-end {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+
+  [dir="rtl"] .indicator-end {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+
+  .indicator-start {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+
+  [dir="rtl"] .indicator-start {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+
+  .indicator-center {
+      --indicator-s: 50%;
+      --indicator-e: 50%;
+      --indicator-x: -50%;
+    }
+
+  [dir="rtl"] .indicator-center {
+      --indicator-x: 50%;
+    }
+
+  .indicator-bottom {
+      --indicator-t: auto;
+      --indicator-b: 0;
+      --indicator-y: 50%;
+    }
+
+  .indicator-middle {
+      --indicator-t: 50%;
+      --indicator-b: 50%;
+      --indicator-y: -50%;
+    }
+
+  .indicator-top {
+      --indicator-t: 0;
+      --indicator-b: auto;
+      --indicator-y: -50%;
+    }
+}

package/dist/input/input.css

@@ -0,0 +1,277 @@
+@layer components {
+  .input {
+      cursor: text;
+      border: var(--border) solid #0000;
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 1;
+      appearance: none;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+      background-color: var(--color-base-100);
+      padding-inline: calc(0.25rem * 3);
+      vertical-align: middle;
+      white-space: nowrap;
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--size);
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+      touch-action: manipulation;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      border-color: var(--input-color);
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      --input-color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .input:where(input) {
+      display: inline-flex;
+    }
+
+  .input :where(input) {
+      display: inline-flex;
+      height: 100%;
+      width: 100%;
+      appearance: none;
+      background-color: transparent;
+      border: none;
+    }
+
+  .input :where(input):focus,
+    .input :where(input):focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .input :where(input):focus,
+    .input :where(input):focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .input :where(input[type="url"]),
+    .input :where(input[type="email"]) {
+      direction: ltr;
+    }
+
+  .input :where(input[type="date"]) {
+      display: inline-flex;
+    }
+
+  .input:focus,
+    .input:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input:focus,
+    .input:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+    .input:focus,
+    .input:focus-within {
+      --font-size: 1rem;
+    }
+    }
+    }
+
+  .input:has(> input[disabled]),
+    .input:is(:disabled, [disabled]),
+    fieldset:disabled .input {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input:has(> input[disabled]),
+    .input:is(:disabled, [disabled]),
+    fieldset:disabled .input {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .input:has(> input[disabled])::placeholder,
+    .input:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .input::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input:has(> input[disabled])::placeholder,
+    .input:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .input::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .input:has(> input[disabled]) > input[disabled] {
+      cursor: not-allowed;
+    }
+
+  .input::-webkit-date-and-time-value {
+      text-align: inherit;
+    }
+
+  .input[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input::-webkit-calendar-picker-indicator {
+      position: absolute;
+      inset-inline-end: 0.75em;
+    }
+
+  .input:has(> input[type="date"]) :where(input[type="date"]) {
+      display: inline-flex;
+      webkit-appearance: none;
+      appearance: none;
+    }
+
+  .input:has(> input[type="date"]) input[type="date"]::-webkit-calendar-picker-indicator {
+      position: absolute;
+      inset-inline-end: 0.75em;
+      width: 1em;
+      height: 1em;
+      cursor: pointer;
+    }
+
+  .input-lg {
+      --size: calc(var(--size-field, 0.25rem) * 12);
+      font-size: max(var(--font-size, 1.125rem), 1.125rem);
+    }
+
+  .input-lg[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-md {
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+    }
+
+  .input-md[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-sm {
+      --size: calc(var(--size-field, 0.25rem) * 8);
+      font-size: max(var(--font-size, 0.75rem), 0.75rem);
+    }
+
+  .input-sm[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -2);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-xl {
+      --size: calc(var(--size-field, 0.25rem) * 14);
+      font-size: max(var(--font-size, 1.375rem), 1.375rem);
+    }
+
+  .input-xl[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -4);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-xs {
+      --size: calc(var(--size-field, 0.25rem) * 6);
+      font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
+    }
+
+  .input-xs[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -1);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-ghost {
+      background-color: transparent;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .input-ghost:focus,
+    .input-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .input-accent,
+    .input-accent:focus,
+    .input-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .input-error,
+    .input-error:focus,
+    .input-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .input-info,
+    .input-info:focus,
+    .input-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .input-neutral,
+    .input-neutral:focus,
+    .input-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .input-primary,
+    .input-primary:focus,
+    .input-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .input-secondary,
+    .input-secondary:focus,
+    .input-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .input-success,
+    .input-success:focus,
+    .input-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .input-warning,
+    .input-warning:focus,
+    .input-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/kbd/kbd.css

@@ -0,0 +1,55 @@
+@layer components {
+  .kbd {
+      box-shadow: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-field);
+      background-color: var(--color-base-200);
+      vertical-align: middle;
+      padding-inline: 0.5em;
+      border: var(--border) solid var(--color-base-content);
+      border-bottom: calc(var(--border) + 1px) solid var(--color-base-content);
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+      height: var(--size);
+      min-width: var(--size);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .kbd {
+      border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .kbd {
+      border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .kbd-lg {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+      font-size: 1rem;
+    }
+
+  .kbd-md {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+    }
+
+  .kbd-sm {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+      font-size: 0.75rem;
+    }
+
+  .kbd-xl {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+      font-size: 1.125rem;
+    }
+
+  .kbd-xs {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+      font-size: 0.625rem;
+    }
+}

package/dist/lib/iterable.js

@@ -0,0 +1,6 @@
+function chain(callbacks) {
+    return (...args)=>{
+        for (const callback of callbacks)callback?.(...args);
+    };
+}
+export { chain };

package/dist/lib/refs/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__mergeRefs_js_61a73eaa__ from "./mergeRefs.js";
+var __webpack_exports__mergeRefs = __WEBPACK_EXTERNAL_MODULE__mergeRefs_js_61a73eaa__.mergeRefs;
+export { __webpack_exports__mergeRefs as mergeRefs };

package/dist/lib/refs/mergeRefs.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__iterable_js_5f52c29a__ from "../iterable.js";
+function mergeRefs(...refs) {
+    return (0, __WEBPACK_EXTERNAL_MODULE__iterable_js_5f52c29a__.chain)(refs);
+}
+export { mergeRefs };

package/dist/lib/style/classes.js

@@ -0,0 +1,40 @@
+function classes(...args) {
+    return args.flat().filter(Boolean).join(" ");
+}
+function falsyToString(value) {
+    return "boolean" == typeof value ? `${value}` : 0 === value ? "0" : value;
+}
+function cva(base, config) {
+    const fn = (props)=>{
+        if (config?.variants == null) return classes(base, props?.class);
+        const { variants, defaultVariants } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props?.[variant];
+            const defaultVariantProp = defaultVariants?.[variant];
+            if (null === variantProp) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant]?.[variantKey];
+        });
+        const propsWithoutUndefined = Object.entries(props || {}).reduce((acc, [key, value])=>{
+            if (void 0 !== value) acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config?.compoundVariants?.reduce((acc, { class: cvClass, ...compoundVariantOptions })=>{
+            const isMatch = Object.entries(compoundVariantOptions).every(([key, value])=>{
+                const currentValue = {
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key];
+                return Array.isArray(value) ? value.includes(currentValue) : currentValue === value;
+            });
+            return isMatch ? [
+                ...acc,
+                cvClass
+            ] : acc;
+        }, []);
+        return classes(base, getVariantClassNames, getCompoundVariantClassNames, props?.class);
+    };
+    fn.variantKeys = config?.variants ? Object.keys(config.variants) : [];
+    return fn;
+}
+export { classes, cva, falsyToString };

package/dist/lib/style/index.js

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__classes_js_a779350e__ from "./classes.js";
+var __webpack_exports__classes = __WEBPACK_EXTERNAL_MODULE__classes_js_a779350e__.classes;
+var __webpack_exports__cva = __WEBPACK_EXTERNAL_MODULE__classes_js_a779350e__.cva;
+export { __webpack_exports__classes as classes, __webpack_exports__cva as cva };

package/dist/lib/tag/createIsButton.js

@@ -0,0 +1,23 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__createTagName_js_d66e5740__ from "./createTagName.js";
+const BUTTON_INPUT_TYPES = [
+    "button",
+    "color",
+    "file",
+    "image",
+    "reset",
+    "submit"
+];
+function isButton(tagName, type) {
+    if ("button" === tagName) return true;
+    if ("input" === tagName && void 0 !== type) return -1 !== BUTTON_INPUT_TYPES.indexOf(type);
+    return false;
+}
+function createIsButton(props) {
+    const tagName = (0, __WEBPACK_EXTERNAL_MODULE__createTagName_js_d66e5740__.createTagName)({
+        element: props.element,
+        fallback: "button"
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>isButton(tagName(), props.type));
+}
+export { BUTTON_INPUT_TYPES, createIsButton, isButton };

package/dist/lib/tag/createTagName.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+function createTagName(props) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>props.element()?.tagName.toLowerCase() ?? props.fallback);
+}
+export { createTagName };

package/dist/lib/tag/index.js

@@ -0,0 +1,7 @@
+import * as __WEBPACK_EXTERNAL_MODULE__createIsButton_js_781d6faa__ from "./createIsButton.js";
+import * as __WEBPACK_EXTERNAL_MODULE__createTagName_js_d66e5740__ from "./createTagName.js";
+var __webpack_exports__BUTTON_INPUT_TYPES = __WEBPACK_EXTERNAL_MODULE__createIsButton_js_781d6faa__.BUTTON_INPUT_TYPES;
+var __webpack_exports__createIsButton = __WEBPACK_EXTERNAL_MODULE__createIsButton_js_781d6faa__.createIsButton;
+var __webpack_exports__createTagName = __WEBPACK_EXTERNAL_MODULE__createTagName_js_d66e5740__.createTagName;
+var __webpack_exports__isButton = __WEBPACK_EXTERNAL_MODULE__createIsButton_js_781d6faa__.isButton;
+export { __webpack_exports__BUTTON_INPUT_TYPES as BUTTON_INPUT_TYPES, __webpack_exports__createIsButton as createIsButton, __webpack_exports__createTagName as createTagName, __webpack_exports__isButton as isButton };

package/dist/link/link.css

@@ -0,0 +1,153 @@
+@layer components {
+  .link {
+      cursor: pointer;
+      text-decoration-line: underline;
+    }
+
+  .link:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .link:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .link:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+  .link-accent {
+      color: var(--color-accent);
+    }
+
+  @media (hover: hover) {
+    .link-accent:hover {
+      color: var(--color-accent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-accent:hover {
+      color: color-mix(in oklab, var(--color-accent) 80%, #000);
+    }
+    }
+    }
+
+  .link-error {
+      color: var(--color-error);
+    }
+
+  @media (hover: hover) {
+    .link-error:hover {
+      color: var(--color-error);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-error:hover {
+      color: color-mix(in oklab, var(--color-error) 80%, #000);
+    }
+    }
+    }
+
+  .link-info {
+      color: var(--color-info);
+    }
+
+  @media (hover: hover) {
+    .link-info:hover {
+      color: var(--color-info);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-info:hover {
+      color: color-mix(in oklab, var(--color-info) 80%, #000);
+    }
+    }
+    }
+
+  .link-neutral {
+      color: var(--color-neutral);
+    }
+
+  @media (hover: hover) {
+    .link-neutral:hover {
+      color: var(--color-neutral);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-neutral:hover {
+      color: color-mix(in oklab, var(--color-neutral) 80%, #000);
+    }
+    }
+    }
+
+  .link-primary {
+      color: var(--color-primary);
+    }
+
+  @media (hover: hover) {
+    .link-primary:hover {
+      color: var(--color-primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-primary:hover {
+      color: color-mix(in oklab, var(--color-primary) 80%, #000);
+    }
+    }
+    }
+
+  .link-secondary {
+      color: var(--color-secondary);
+    }
+
+  @media (hover: hover) {
+    .link-secondary:hover {
+      color: var(--color-secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-secondary:hover {
+      color: color-mix(in oklab, var(--color-secondary) 80%, #000);
+    }
+    }
+    }
+
+  .link-success {
+      color: var(--color-success);
+    }
+
+  @media (hover: hover) {
+    .link-success:hover {
+      color: var(--color-success);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-success:hover {
+      color: color-mix(in oklab, var(--color-success) 80%, #000);
+    }
+    }
+    }
+
+  .link-warning {
+      color: var(--color-warning);
+    }
+
+  @media (hover: hover) {
+    .link-warning:hover {
+      color: var(--color-warning);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-warning:hover {
+      color: color-mix(in oklab, var(--color-warning) 80%, #000);
+    }
+    }
+    }
+
+  .link-hover {
+      text-decoration-line: none;
+    }
+
+  @media (hover: hover) {
+    .link-hover:hover {
+      text-decoration-line: underline;
+    }
+    }
+}