solid-uix 0.5.1 → 0.6.0

package/dist/main.css

@@ -194,6 +194,68 @@
   border-color: var(--colors-error-400);
 }
 
+/* src/stepper/stepper.module.css */
+.stepper_stepper {
+  width: 100%;
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.stepper_step {
+  position: relative;
+  flex: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: Inter;
+  font-weight: 400;
+  font-size: 16px;
+  text-align: center;
+}
+.stepper_step:last-child {
+  flex: none;
+}
+.stepper_step::after {
+  content: "";
+  display: block;
+  height: 1px;
+  flex: 1 1 0%;
+  background: var(--colors-black-600);
+  margin-right: 6px;
+}
+.stepper_step:last-child::after {
+  display: none;
+}
+.stepper_indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+.stepper_indicator.stepper_accent {
+  background: var(--colors-accent-500);
+  color: var(--colors-black-900);
+}
+.stepper_indicator.stepper_secondary {
+  background: var(--colors-black-700);
+}
+.stepper_button {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: Inter;
+  font-weight: 400;
+  font-size: 16px;
+  text-align: center;
+}
+
 /* src/dialog/dialog.module.css */
 .dialog_dialog[open] {
   background: var(--colors-black-800);

package/dist/main.d.ts

@@ -33,6 +33,20 @@ type TextInputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
 
 declare const TextInput: (props: TextInputProps) => solid_js.JSX.Element;
 
+type StepperProps = JSX.OlHTMLAttributes<HTMLOListElement>;
+type StepProps = JSX.LiHTMLAttributes<HTMLLIElement>;
+type StepIndicatorProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    color?: "accent" | "secondary";
+};
+type StepButtonProps = JSX.LiHTMLAttributes<HTMLLIElement>;
+
+declare const Stepper: {
+    (props: StepperProps): solid_js.JSX.Element;
+    Step: (props: StepProps) => solid_js.JSX.Element;
+    StepIndicator: (props: StepIndicatorProps) => solid_js.JSX.Element;
+    StepButton: (props: StepButtonProps) => solid_js.JSX.Element;
+};
+
 type OnOpenChange = (isOpen: boolean) => void;
 /**
  * Use event.preventDefault() to prevent dialog close
@@ -76,4 +90,4 @@ declare const Field: {
     Message: (props: FieldMessageProps) => solid_js.JSX.Element;
 };
 
-export { Button, Checkbox, Dialog, Field, Link, TextInput, cls };
+export { Button, Checkbox, Dialog, Field, Link, Stepper, TextInput, cls };

package/dist/main.js

@@ -5,8 +5,9 @@ export { default as buttonSx } from './button.module.css';
 import sx2 from './link.module.css';
 import sx3 from './checkbox.module.css';
 import sx4 from './text_input.module.css';
-import sx5 from './dialog.module.css';
-import sx6 from './field.module.css';
+import sx5 from './stepper.module.css';
+import sx6 from './dialog.module.css';
+import sx7 from './field.module.css';
 
 // src/main.ts
 
@@ -186,6 +187,67 @@ var TextInput = (props) => {
     return _el$;
   })();
 };
+var _tmpl$5 = /* @__PURE__ */ template(`<ol>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<li>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<button type=button>`);
+var Stepper = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$ = _tmpl$5();
+    spread(_el$, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(sx5.stepper, local.class);
+      }
+    }), false, true);
+    insert(_el$, () => props.children);
+    return _el$;
+  })();
+};
+var Step = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (() => {
+    var _el$2 = _tmpl$23();
+    spread(_el$2, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(sx5.step, local.class);
+      }
+    }), false, true);
+    insert(_el$2, () => props.children);
+    return _el$2;
+  })();
+};
+var defaultProps2 = {
+  color: "secondary"
+};
+var StepIndicator = (props) => {
+  const merged = mergeProps(defaultProps2, props);
+  const [local, rest] = splitProps(merged, ["class", "color"]);
+  return (() => {
+    var _el$3 = _tmpl$32();
+    spread(_el$3, mergeProps$1(rest, {
+      get ["class"]() {
+        return cls(sx5.indicator, local.class, local.color === "accent" && sx5.accent, local.color === "secondary" && sx5.secondary);
+      }
+    }), false, true);
+    insert(_el$3, () => props.children);
+    return _el$3;
+  })();
+};
+var StepButton = (props) => {
+  const [local, rest] = splitProps(props, ["children"]);
+  return createComponent(Step, mergeProps$1(rest, {
+    get children() {
+      var _el$4 = _tmpl$42();
+      insert(_el$4, () => local.children);
+      effect(() => className(_el$4, sx5.button));
+      return _el$4;
+    }
+  }));
+};
+Stepper.Step = Step;
+Stepper.StepIndicator = StepIndicator;
+Stepper.StepButton = StepButton;
 var defaultValue2 = {
   setDialogRef() {
   },
@@ -247,10 +309,10 @@ var DialogProvider = (props) => {
     }
   });
 };
-var _tmpl$5 = /* @__PURE__ */ template(`<dialog>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<h2>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<p>`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<dialog>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<h2>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
 var Dialog = (props) => {
   return createComponent(DialogProvider, mergeProps$1(props, {
     get children() {
@@ -272,14 +334,14 @@ var Trigger = (props) => {
 var Content = (props) => {
   const context = useDialogContext();
   return (() => {
-    var _el$ = _tmpl$5();
+    var _el$ = _tmpl$6();
     use((element) => {
       props.ref = element;
       context.setDialogRef(element);
     }, _el$);
     spread(_el$, mergeProps$1(props, {
       get ["class"]() {
-        return cls(sx5.dialog, props.class);
+        return cls(sx6.dialog, props.class);
       },
       get ["aria-labelledby"]() {
         return context.ariaLabelledBy();
@@ -301,11 +363,11 @@ var Title = (props) => {
   const titleId = createUniqueId();
   context.setTitleId(titleId);
   return (() => {
-    var _el$2 = _tmpl$23();
+    var _el$2 = _tmpl$24();
     spread(_el$2, mergeProps$1(props, {
       "id": titleId,
       get ["class"]() {
-        return cls(sx5.title, props.class);
+        return cls(sx6.title, props.class);
       }
     }), false, true);
     insert(_el$2, () => props.children);
@@ -317,11 +379,11 @@ var Description = (props) => {
   const descriptionId = createUniqueId();
   context.setDescriptionId(descriptionId);
   return (() => {
-    var _el$3 = _tmpl$32();
+    var _el$3 = _tmpl$33();
     spread(_el$3, mergeProps$1(props, {
       "id": descriptionId,
       get ["class"]() {
-        return cls(sx5.description, props.class);
+        return cls(sx6.description, props.class);
       }
     }), false, true);
     insert(_el$3, () => props.children);
@@ -341,10 +403,10 @@ var Close = (props) => {
 };
 var Actions = (props) => {
   return (() => {
-    var _el$4 = _tmpl$42();
+    var _el$4 = _tmpl$43();
     spread(_el$4, mergeProps$1(props, {
       get ["class"]() {
-        return cls(sx5.actions, props.class);
+        return cls(sx6.actions, props.class);
       }
     }), false, true);
     insert(_el$4, () => props.children);
@@ -357,9 +419,9 @@ Dialog.Title = Title;
 Dialog.Description = Description;
 Dialog.Close = Close;
 Dialog.Actions = Actions;
-var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<label>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<p>`);
 var Field = (props) => {
   const [local, rest] = splitProps(props, ["class", "error"]);
   return createComponent(FieldProvider, {
@@ -367,10 +429,10 @@ var Field = (props) => {
       return !!local.error;
     },
     get children() {
-      var _el$ = _tmpl$6();
+      var _el$ = _tmpl$7();
       spread(_el$, mergeProps$1(rest, {
         get ["class"]() {
-          return cls(sx6.field, local.class);
+          return cls(sx7.field, local.class);
         }
       }), false, true);
       insert(_el$, () => props.children);
@@ -382,13 +444,13 @@ var FieldLabel = (props) => {
   const [local, rest] = splitProps(props, ["class"]);
   const context = useFieldContext();
   return (() => {
-    var _el$2 = _tmpl$24();
+    var _el$2 = _tmpl$25();
     spread(_el$2, mergeProps$1(rest, {
       get ["for"]() {
         return context.fieldId;
       },
       get ["class"]() {
-        return cls(sx6.label, local.class);
+        return cls(sx7.label, local.class);
       }
     }), false, true);
     insert(_el$2, () => rest.children);
@@ -408,11 +470,11 @@ var FieldMessage = (props) => {
       return rest.children;
     },
     get children() {
-      var _el$3 = _tmpl$33();
+      var _el$3 = _tmpl$34();
       spread(_el$3, mergeProps$1(rest, {
         "id": messageId,
         get ["class"]() {
-          return cls(sx6.message, local.class, local.level === "error" && sx6.error);
+          return cls(sx7.message, local.class, local.level === "error" && sx7.error);
         }
       }), false, true);
       insert(_el$3, () => rest.children);
@@ -423,4 +485,4 @@ var FieldMessage = (props) => {
 Field.Label = FieldLabel;
 Field.Message = FieldMessage;
 
-export { Button, Checkbox, Dialog, Field, Link, TextInput, cls };
+export { Button, Checkbox, Dialog, Field, Link, Stepper, TextInput, cls };

package/dist/main.jsx

@@ -184,6 +184,62 @@ var TextInput = (props) => {
   />;
 };
 
+// src/stepper/stepper.tsx
+import { mergeProps as mergeProps2, splitProps as splitProps5 } from "solid-js";
+
+// src/stepper/stepper.module.css
+var stepper_default = {
+  stepper: "stepper_stepper",
+  step: "stepper_step",
+  indicator: "stepper_indicator",
+  accent: "stepper_accent",
+  secondary: "stepper_secondary",
+  button: "stepper_button"
+};
+
+// src/stepper/stepper.tsx
+var Stepper = (props) => {
+  const [local, rest] = splitProps5(props, ["class"]);
+  return <ol {...rest} class={cls(stepper_default.stepper, local.class)}>
+      {props.children}
+    </ol>;
+};
+var Step = (props) => {
+  const [local, rest] = splitProps5(props, ["class"]);
+  return <li {...rest} class={cls(stepper_default.step, local.class)}>
+      {props.children}
+    </li>;
+};
+var defaultProps2 = {
+  color: "secondary"
+};
+var StepIndicator = (props) => {
+  const merged = mergeProps2(defaultProps2, props);
+  const [local, rest] = splitProps5(merged, ["class", "color"]);
+  return <div
+    {...rest}
+    class={cls(
+      stepper_default.indicator,
+      local.class,
+      local.color === "accent" && stepper_default.accent,
+      local.color === "secondary" && stepper_default.secondary
+    )}
+  >
+      {props.children}
+    </div>;
+};
+var StepButton = (props) => {
+  const [local, rest] = splitProps5(props, ["children"]);
+  return <Step {...rest}>
+      <button type="button" class={stepper_default.button}>
+        {local.children}
+      </button>
+    </Step>;
+};
+Stepper.Step = Step;
+Stepper.StepIndicator = StepIndicator;
+Stepper.StepButton = StepButton;
+
 // src/dialog/dialog.tsx
 import { children, createEffect as createEffect2, createUniqueId as createUniqueId3 } from "solid-js";
 
@@ -331,7 +387,7 @@ Dialog.Close = Close;
 Dialog.Actions = Actions;
 
 // src/field/field.tsx
-import { createUniqueId as createUniqueId4, Show, splitProps as splitProps5 } from "solid-js";
+import { createUniqueId as createUniqueId4, Show, splitProps as splitProps6 } from "solid-js";
 
 // src/field/field.module.css
 var field_default = {
@@ -343,7 +399,7 @@ var field_default = {
 
 // src/field/field.tsx
 var Field = (props) => {
-  const [local, rest] = splitProps5(props, ["class", "error"]);
+  const [local, rest] = splitProps6(props, ["class", "error"]);
   return <FieldProvider error={!!local.error}>
       <div {...rest} class={cls(field_default.field, local.class)}>
         {props.children}
@@ -351,14 +407,14 @@ var Field = (props) => {
     </FieldProvider>;
 };
 var FieldLabel = (props) => {
-  const [local, rest] = splitProps5(props, ["class"]);
+  const [local, rest] = splitProps6(props, ["class"]);
   const context = useFieldContext();
   return <label {...rest} for={context.fieldId} class={cls(field_default.label, local.class)}>
       {rest.children}
     </label>;
 };
 var FieldMessage = (props) => {
-  const [local, rest] = splitProps5(props, ["class", "level"]);
+  const [local, rest] = splitProps6(props, ["class", "level"]);
   const context = useFieldContext();
   const messageId = createUniqueId4();
   context.setMessage({ level: local.level || "info", id: messageId });
@@ -380,6 +436,7 @@ export {
   Dialog,
   Field,
   Link,
+  Stepper,
   TextInput,
   button_default as buttonSx,
   cls

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-uix",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/main.js",
   "module": "./dist/main.js",
@@ -11,8 +11,8 @@
       "solid": "./dist/main.jsx",
       "default": "./dist/main.js"
     },
-    "./css": {
-      "import": "./dist/main.css"
+    "./dist/main.css": {
+      "default": "./dist/main.css"
     }
   },
   "files": [