@pathscale/ui 1.1.33 → 1.1.35

package/dist/components/text-field/TextField.d.ts

@@ -0,0 +1,34 @@
+import "./TextField.css";
+import { type Accessor, type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type TextFieldVariant = "primary" | "secondary";
+export type TextFieldRenderProps = {
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+};
+export type TextFieldContextValue = {
+    variant: Accessor<TextFieldVariant>;
+    fullWidth: Accessor<boolean>;
+    isInvalid: Accessor<boolean>;
+    isDisabled: Accessor<boolean>;
+    isRequired: Accessor<boolean>;
+};
+export declare const TextFieldContext: import("solid-js").Context<TextFieldContextValue | undefined>;
+export type TextFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: TextFieldRenderProps) => JSX.Element);
+    variant?: TextFieldVariant;
+    fullWidth?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isRequired?: boolean;
+};
+declare const TextFieldRoot: Component<TextFieldRootProps>;
+declare const TextField: Component<TextFieldRootProps> & {
+    Root: Component<TextFieldRootProps>;
+};
+declare const useTextFieldContext: () => TextFieldContextValue | undefined;
+export default TextField;
+export { TextField, TextFieldRoot, useTextFieldContext };
+export type { TextFieldRootProps as TextFieldProps };

package/dist/components/text-field/TextField.js

@@ -0,0 +1,85 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./TextField.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const VARIANT_CLASS_MAP = {
+    primary: "text-field--primary",
+    secondary: "text-field--secondary"
+};
+const TextFieldContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const TextFieldRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant",
+        "fullWidth",
+        "isInvalid",
+        "isDisabled",
+        "disabled",
+        "isRequired"
+    ]);
+    const variant = ()=>local.variant ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isRequired = ()=>Boolean(local.isRequired);
+    const renderChildren = ()=>{
+        if ("function" == typeof local.children) return local.children({
+            isInvalid: isInvalid(),
+            isDisabled: isDisabled(),
+            isRequired: isRequired()
+        });
+        return local.children;
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TextFieldContext.Provider, {
+        value: {
+            variant,
+            fullWidth,
+            isInvalid,
+            isDisabled,
+            isRequired
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("text-field", VARIANT_CLASS_MAP[variant()], fullWidth() && "text-field--full-width", local.class, local.className);
+                },
+                "data-slot": "textfield",
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-required"] () {
+                    return isRequired() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, renderChildren);
+            return _el$;
+        }
+    });
+};
+const TextField = Object.assign(TextFieldRoot, {
+    Root: TextFieldRoot
+});
+const useTextFieldContext = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TextFieldContext);
+const text_field_TextField = TextField;
+export { TextField, TextFieldContext, TextFieldRoot, text_field_TextField as default, useTextFieldContext };

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

@@ -0,0 +1 @@
+export { default, TextField, TextFieldRoot, TextFieldContext, useTextFieldContext, type TextFieldProps, type TextFieldRootProps, type TextFieldVariant, type TextFieldRenderProps, type TextFieldContextValue, } from "./TextField";

package/dist/components/text-field/index.js

@@ -0,0 +1,7 @@
+import * as __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__ from "./TextField.js";
+var __webpack_exports__TextField = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.TextField;
+var __webpack_exports__TextFieldContext = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.TextFieldContext;
+var __webpack_exports__TextFieldRoot = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.TextFieldRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__["default"];
+var __webpack_exports__useTextFieldContext = __WEBPACK_EXTERNAL_MODULE__TextField_js_0c3fb48e__.useTextFieldContext;
+export { __webpack_exports__TextField as TextField, __webpack_exports__TextFieldContext as TextFieldContext, __webpack_exports__TextFieldRoot as TextFieldRoot, __webpack_exports__default as default, __webpack_exports__useTextFieldContext as useTextFieldContext };

package/dist/components/textarea/Textarea.d.ts

@@ -1,15 +1,10 @@
-import "./textarea.css";
-import { type JSX } from "solid-js";
-import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
-type TextareaBaseProps = {
-    color?: ComponentColor;
-    size?: ComponentSize;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-    resize?: "none" | "x" | "y" | "both";
+import { type Component } from "solid-js";
+import { TextArea, TextAreaRoot, type TextAreaProps as BaseTextAreaProps, type TextAreaRootProps as BaseTextAreaRootProps, type TextAreaVariant as BaseTextAreaVariant } from "../text-area";
+export type TextareaVariant = BaseTextAreaVariant;
+export type TextareaRootProps = BaseTextAreaRootProps;
+export type TextareaProps = BaseTextAreaProps;
+declare const Textarea: Component<BaseTextAreaProps> & {
+    Root: Component<BaseTextAreaProps>;
 };
-export type TextareaProps = TextareaBaseProps & IComponentBaseProps & Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaBaseProps>;
-declare const Textarea: (props: TextareaProps) => JSX.Element;
 export default Textarea;
+export { Textarea, TextArea, TextAreaRoot };

package/dist/components/textarea/Textarea.js

@@ -1,53 +1,22 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./textarea.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<textarea>");
-const Textarea = (props)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__ from "../text-area/index.js";
+const TextareaRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "color",
-        "size",
-        "dataTheme",
         "class",
-        "className",
-        "style",
-        "resize"
+        "className"
     ]);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("textarea", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "textarea-xl": "xl" === local.size,
-            "textarea-lg": "lg" === local.size,
-            "textarea-md": "md" === local.size,
-            "textarea-sm": "sm" === local.size,
-            "textarea-xs": "xs" === local.size,
-            "textarea-primary": "primary" === local.color,
-            "textarea-secondary": "secondary" === local.color,
-            "textarea-accent": "accent" === local.color,
-            "textarea-ghost": "ghost" === local.color,
-            "textarea-info": "info" === local.color,
-            "textarea-success": "success" === local.color,
-            "textarea-warning": "warning" === local.color,
-            "textarea-error": "error" === local.color,
-            "resize-y": "y" === local.resize,
-            "resize-x": "x" === local.resize,
-            "resize-none": "none" === local.resize,
-            "resize-both": "both" === local.resize
-        }));
-    return (()=>{
-        var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$;
-    })();
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__.TextAreaRoot, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
+        }
+    }));
 };
+const Textarea = Object.assign(TextareaRoot, {
+    Root: TextareaRoot
+});
 const textarea_Textarea = Textarea;
-export { textarea_Textarea as default };
+var __webpack_exports__TextArea = __WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__.TextArea;
+var __webpack_exports__TextAreaRoot = __WEBPACK_EXTERNAL_MODULE__text_area_index_js_555b41ee__.TextAreaRoot;
+export { Textarea, textarea_Textarea as default, __webpack_exports__TextArea as TextArea, __webpack_exports__TextAreaRoot as TextAreaRoot };

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

@@ -1 +1,2 @@
-export { default, type TextareaProps } from "./Textarea";
+export { default as Textarea } from "./Textarea";
+export { default, TextArea, TextAreaRoot, type TextareaProps as TextAreaProps, type TextareaRootProps as TextAreaRootProps, type TextareaVariant as TextAreaVariant, } from "./Textarea";

package/dist/components/textarea/index.js

@@ -1,3 +1,6 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__ from "./Textarea.js";
+var __webpack_exports__TextArea = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__.TextArea;
+var __webpack_exports__TextAreaRoot = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__.TextAreaRoot;
+var __webpack_exports__Textarea = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__["default"];
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Textarea_js_eded46f6__["default"];
-export { __webpack_exports__default as default };
+export { __webpack_exports__TextArea as TextArea, __webpack_exports__TextAreaRoot as TextAreaRoot, __webpack_exports__Textarea as Textarea, __webpack_exports__default as default };

package/dist/components/time-field/TimeField.css

@@ -0,0 +1,215 @@
+@layer components {
+  .time-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .time-field[data-invalid="true"] [data-slot="description"],
+  .time-field[aria-invalid="true"] [data-slot="description"] {
+    display: none;
+  }
+
+  .time-field [data-slot="label"] {
+    width: fit-content;
+  }
+
+  .time-field [data-slot="description"] {
+    padding-inline: 0.25rem;
+  }
+
+  .time-field--full-width {
+    width: 100%;
+  }
+
+  .date-input-group {
+    display: inline-flex;
+    align-items: center;
+    height: 2.25rem;
+    overflow: hidden;
+    border-radius: var(--radius-field, 0.75rem);
+    border: var(--border-width-field, 1px) solid
+      var(--color-field-border, color-mix(in oklab, var(--color-base-content) 16%, transparent));
+    background-color: var(--color-field, var(--color-base-100));
+    color: var(--color-field-foreground, var(--color-base-content));
+    box-shadow:
+      0 1px 0 color-mix(in oklab, var(--color-base-content) 8%, transparent),
+      0 1px 0 color-mix(in oklab, var(--color-base-100) 60%, transparent) inset;
+    outline: none;
+    transition:
+      background-color 150ms var(--ease-smooth),
+      border-color 150ms var(--ease-smooth),
+      box-shadow 150ms var(--ease-out);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .date-input-group {
+      transition: none;
+    }
+  }
+
+  @media (hover: hover) {
+    .date-input-group:hover:not(:focus-within):not([data-disabled="true"]) {
+      background-color: var(--color-field-hover, var(--color-base-200));
+      border-color: var(--color-field-border-hover, color-mix(in oklab, var(--color-base-content) 22%, transparent));
+    }
+  }
+
+  .date-input-group:focus-within,
+  .date-input-group[data-focus-within="true"] {
+    border-color: var(--color-field-border-focus, var(--color-accent));
+    background-color: var(--color-field-focus, var(--color-base-100));
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
+      0 1px 0 color-mix(in oklab, var(--color-accent) 24%, transparent);
+  }
+
+  .date-input-group[data-invalid="true"] {
+    border-color: var(--color-field-border-invalid, var(--color-danger));
+    background-color: var(--color-field-focus, var(--color-base-100));
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--color-danger) 20%, transparent),
+      0 1px 0 color-mix(in oklab, var(--color-danger) 20%, transparent);
+  }
+
+  .date-input-group[data-disabled="true"],
+  .date-input-group[aria-disabled="true"] {
+    cursor: not-allowed;
+    background-color: var(--color-base-200);
+    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+    opacity: var(--disabled-opacity, 0.6);
+    box-shadow: none;
+  }
+
+  .date-input-group__input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: inherit;
+    outline: none;
+    box-shadow: none;
+  }
+
+  .date-input-group__input::-webkit-calendar-picker-indicator {
+    opacity: 0.7;
+    cursor: pointer;
+  }
+
+  .date-input-group:has([data-slot="date-input-group-prefix"]) .date-input-group__input {
+    padding-inline-start: 0.5rem;
+  }
+
+  .date-input-group:has([data-slot="date-input-group-suffix"]) .date-input-group__input {
+    padding-inline-end: 0.5rem;
+  }
+
+  .date-input-group__input:focus,
+  .date-input-group__input:focus-visible {
+    outline: none;
+  }
+
+  .date-input-group__input-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    width: fit-content;
+    overflow-x: auto;
+    overflow-y: clip;
+    scrollbar-width: none;
+  }
+
+  .date-input-group__input-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .date-input-group__segment {
+    display: inline-block;
+    border-radius: 0.375rem;
+    padding-inline: 0.125rem;
+    text-wrap: nowrap;
+    text-align: end;
+    outline: none;
+  }
+
+  .date-input-group__segment[data-type="literal"] {
+    padding-inline: 0;
+    color: var(--color-muted, color-mix(in oklab, var(--color-base-content) 55%, transparent));
+  }
+
+  .date-input-group__segment[data-placeholder="true"] {
+    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+  }
+
+  .date-input-group__segment:focus,
+  .date-input-group__segment[data-focused="true"] {
+    background-color: var(--color-accent-soft);
+    color: var(--color-accent-soft-foreground);
+  }
+
+  .date-input-group__segment[data-disabled="true"] {
+    opacity: 0.5;
+  }
+
+  .date-input-group__segment[data-invalid="true"] {
+    color: var(--color-danger);
+  }
+
+  .date-input-group__segment[data-invalid="true"]:focus,
+  .date-input-group__segment[data-invalid="true"][data-focused="true"] {
+    background-color: var(--color-danger-soft);
+    color: var(--color-danger-soft-foreground);
+  }
+
+  .date-input-group__prefix {
+    display: flex;
+    align-items: center;
+    margin-inline-start: 0.75rem;
+    margin-inline-end: 0;
+    flex-shrink: 0;
+    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    pointer-events: none;
+  }
+
+  .date-input-group__suffix {
+    display: flex;
+    align-items: center;
+    margin-inline-end: 0.75rem;
+    flex-shrink: 0;
+    color: var(--color-field-placeholder, color-mix(in oklab, var(--color-base-content) 45%, transparent));
+    pointer-events: none;
+  }
+
+  .date-input-group--primary {
+  }
+
+  .date-input-group--secondary {
+    box-shadow: none;
+    background-color: var(--date-input-group-bg, var(--color-default, var(--color-base-200)));
+  }
+
+  @media (hover: hover) {
+    .date-input-group--secondary:hover:not(:focus-within):not([data-disabled="true"]) {
+      background-color: var(--date-input-group-bg-hover, var(--color-default-hover, var(--color-base-300)));
+    }
+  }
+
+  .date-input-group--secondary:focus-within,
+  .date-input-group--secondary[data-focus-within="true"] {
+    background-color: var(--date-input-group-bg-focus, var(--color-default, var(--color-base-200)));
+  }
+
+  .date-input-group--secondary[data-invalid="true"] {
+    border-color: var(--color-field-border-invalid, var(--color-danger));
+    background-color: var(--date-input-group-bg-focus, var(--color-default, var(--color-base-200)));
+  }
+
+  .date-input-group--full-width {
+    width: 100%;
+  }
+}

package/dist/components/time-field/TimeField.d.ts

@@ -0,0 +1,64 @@
+import "./TimeField.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type TimeFieldVariant = "primary" | "secondary";
+export type TimeFieldRenderProps = {
+    value: string;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+};
+export type TimeFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: TimeFieldRenderProps) => JSX.Element);
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
+    fullWidth?: boolean;
+    variant?: TimeFieldVariant;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    required?: boolean;
+};
+export type TimeFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: TimeFieldRenderProps) => JSX.Element);
+};
+export type TimeFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & IComponentBaseProps & {
+    onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
+};
+export type TimeFieldInputContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TimeFieldSegmentValue = {
+    type?: string;
+    text?: string;
+    isPlaceholder?: boolean;
+    isFocused?: boolean;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+};
+export type TimeFieldSegmentProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+    segment?: TimeFieldSegmentValue;
+};
+export type TimeFieldPrefixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type TimeFieldSuffixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+declare const TimeFieldRoot: ParentComponent<TimeFieldRootProps>;
+declare const TimeFieldGroup: ParentComponent<TimeFieldGroupProps>;
+declare const TimeFieldInput: Component<TimeFieldInputProps>;
+declare const TimeFieldInputContainer: ParentComponent<TimeFieldInputContainerProps>;
+declare const TimeFieldSegment: ParentComponent<TimeFieldSegmentProps>;
+declare const TimeFieldPrefix: ParentComponent<TimeFieldPrefixProps>;
+declare const TimeFieldSuffix: ParentComponent<TimeFieldSuffixProps>;
+declare const TimeField: ParentComponent<TimeFieldRootProps> & {
+    Root: ParentComponent<TimeFieldRootProps>;
+    Group: ParentComponent<TimeFieldGroupProps>;
+    Input: Component<TimeFieldInputProps>;
+    InputContainer: ParentComponent<TimeFieldInputContainerProps>;
+    Segment: ParentComponent<TimeFieldSegmentProps>;
+    Prefix: ParentComponent<TimeFieldPrefixProps>;
+    Suffix: ParentComponent<TimeFieldSuffixProps>;
+};
+export default TimeField;
+export { TimeField, TimeFieldRoot, TimeFieldGroup, TimeFieldInput, TimeFieldInputContainer, TimeFieldSegment, TimeFieldPrefix, TimeFieldSuffix, };
+export type { TimeFieldRootProps as TimeFieldProps };