@jakubmazanec/ui 0.5.1 → 0.5.2-unstable.fabba915

package/build/components/Button.js

@@ -1,140 +1,131 @@
-"use strict";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button as HeadlessButton } from "@headlessui/react";
-import {
-  Children,
-  cloneElement,
-  isValidElement
-} from "react";
-import {
-  createComponentTheme
-} from "../theme/internals.js";
+import { createComponentTheme } from "../theme/internals/createComponentTheme.js";
 import { Icon } from "./Icon.js";
 import { Spinner } from "./Spinner.js";
-export const useButtonTheme = createComponentTheme("Button", {
-  variants: {
-    variant: ["solid", "outline", "text", "invisible"],
-    size: ["small", "medium", "large"],
-    disabled: [true, false]
-  }
-});
+import { Button } from "@headlessui/react";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region source/components/Button.tsx
+const useButtonTheme = createComponentTheme("Button", { variants: {
+	variant: [
+		"solid",
+		"outline",
+		"text",
+		"invisible"
+	],
+	size: [
+		"small",
+		"medium",
+		"large"
+	],
+	disabled: [true, false]
+} });
 const BUTTON_ELEMENT = "button";
-export function Button({
-  variant = "solid",
-  size = "medium",
-  disabled = false,
-  as = BUTTON_ELEMENT,
-  idle = true,
-  autoFocus = false,
-  submit = false,
-  className,
-  ref,
-  children,
-  ...rest
-}) {
-  let theme = useButtonTheme({ variant, size, disabled });
-  let props = {
-    as,
-    ref,
-    className: theme(disabled ? "pointer-events-none" : null, className),
-    disabled: disabled || submit && !idle,
-    autoFocus,
-    "data-component": "button",
-    ...rest
-  };
-  if (as === BUTTON_ELEMENT) {
-    props.type = "button";
-  }
-  if (submit) {
-    props.type = "submit";
-  }
-  if (typeof children === "function") {
-    return /* @__PURE__ */ jsx(HeadlessButton, { ...props, children });
-  }
-  let enhancedChildren = Children.map(children, (child) => {
-    if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {
-      return cloneElement(child, { "data-slot": "icon" });
-    }
-    if (!isValidElement(child) && typeof child === "string") {
-      return /* @__PURE__ */ jsx("span", { "data-slot": "text", children: child });
-    }
-    return child;
-  });
-  return /* @__PURE__ */ jsxs(HeadlessButton, { ...props, children: [
-    submit && !idle ? /* @__PURE__ */ jsx(Spinner, { "data-icon": true }) : null,
-    enhancedChildren
-  ] });
+function Button$1({ variant = "solid", size = "medium", disabled = false, as = BUTTON_ELEMENT, idle = true, autoFocus = false, submit = false, className, ref, children, ...rest }) {
+	let props = {
+		as,
+		ref,
+		className: useButtonTheme({
+			variant,
+			size,
+			disabled
+		})(disabled ? "pointer-events-none" : null, className),
+		disabled: disabled || submit && !idle,
+		autoFocus,
+		"data-component": "button",
+		...rest
+	};
+	if (as === BUTTON_ELEMENT) props.type = "button";
+	if (submit) props.type = "submit";
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Button, {
+		...props,
+		children
+	});
+	let enhancedChildren = Children.map(children, (child) => {
+		if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) return cloneElement(child, { "data-slot": "icon" });
+		if (!isValidElement(child) && typeof child === "string") return /* @__PURE__ */ jsx("span", {
+			"data-slot": "text",
+			children: child
+		});
+		return child;
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		children: [submit && !idle ? /* @__PURE__ */ jsx(Spinner, { "data-icon": true }) : null, enhancedChildren]
+	});
 }
-export const buttonTheme = {
-  className: "rounded-2 inline-flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors",
-  variants: {
-    variant: {
-      solid: "text-white bg-neutral-900 hover:bg-neutral-800",
-      outline: "text-neutral-950 border-2 border-neutral-100 hover:border-neutral-200",
-      text: "text-neutral-950 border-2 border-transparent hover:border-neutral-200",
-      invisible: "cursor-default text-neutral-200 hover:text-neutral-600 select-none"
-    },
-    size: {
-      small: "text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-1 *:first:data-[slot=icon]:-ml-2 *:last:data-[slot=icon]:-mr-2",
-      medium: "leading-6 px-2.5 h-9 min-w-9 gap-x-1 *:first:data-[slot=icon]:-ml-1.5 *:last:data-[slot=icon]:-mr-1.5",
-      large: "text-lg leading-6 px-3 h-10 min-w-10 gap-x-1 *:first:data-[slot=icon]:-ml-1 *:last:data-[slot=icon]:-mr-1"
-    },
-    disabled: {
-      true: "",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "solid",
-      size: "small",
-      className: "px-3"
-    },
-    {
-      variant: "solid",
-      size: "medium",
-      className: "px-3"
-    },
-    {
-      variant: "solid",
-      size: "large",
-      className: "px-3.5"
-    },
-    {
-      variant: "invisible",
-      size: "small",
-      className: "text-xs px-2 h-5 min-w-5"
-    },
-    {
-      variant: "invisible",
-      size: "medium",
-      className: "px-2 h-6 min-w-6"
-    },
-    {
-      variant: "invisible",
-      size: "large",
-      className: "px-2 h-7 min-w-7"
-    },
-    {
-      variant: "solid",
-      disabled: true,
-      className: "text-white bg-neutral-200 hover:bg-neutral-200"
-    },
-    {
-      variant: "outline",
-      disabled: true,
-      className: "text-neutral-200 hover:border-neutral-100"
-    },
-    {
-      variant: "text",
-      disabled: true,
-      className: "text-neutral-200 hover:border-transparent"
-    },
-    {
-      variant: "invisible",
-      disabled: true,
-      className: "text-neutral-200 "
-    }
-  ]
+const buttonTheme = {
+	className: "rounded-2 inline-flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors",
+	variants: {
+		variant: {
+			solid: "text-white bg-neutral-900 hover:bg-neutral-800",
+			outline: "text-neutral-950 border-2 border-neutral-100 hover:border-neutral-200",
+			text: "text-neutral-950 border-2 border-transparent hover:border-neutral-200",
+			invisible: "cursor-default text-neutral-200 hover:text-neutral-600 select-none"
+		},
+		size: {
+			small: "text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-1 *:first:data-[slot=icon]:-ml-2 *:last:data-[slot=icon]:-mr-2",
+			medium: "leading-6 px-2.5 h-9 min-w-9 gap-x-1 *:first:data-[slot=icon]:-ml-1.5 *:last:data-[slot=icon]:-mr-1.5",
+			large: "text-lg leading-6 px-3 h-10 min-w-10 gap-x-1 *:first:data-[slot=icon]:-ml-1 *:last:data-[slot=icon]:-mr-1"
+		},
+		disabled: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "solid",
+			size: "small",
+			className: "px-3"
+		},
+		{
+			variant: "solid",
+			size: "medium",
+			className: "px-3"
+		},
+		{
+			variant: "solid",
+			size: "large",
+			className: "px-3.5"
+		},
+		{
+			variant: "invisible",
+			size: "small",
+			className: "text-xs px-2 h-5 min-w-5"
+		},
+		{
+			variant: "invisible",
+			size: "medium",
+			className: "px-2 h-6 min-w-6"
+		},
+		{
+			variant: "invisible",
+			size: "large",
+			className: "px-2 h-7 min-w-7"
+		},
+		{
+			variant: "solid",
+			disabled: true,
+			className: "text-white bg-neutral-200 hover:bg-neutral-200"
+		},
+		{
+			variant: "outline",
+			disabled: true,
+			className: "text-neutral-200 hover:border-neutral-100"
+		},
+		{
+			variant: "text",
+			disabled: true,
+			className: "text-neutral-200 hover:border-transparent"
+		},
+		{
+			variant: "invisible",
+			disabled: true,
+			className: "text-neutral-200 "
+		}
+	]
 };
-//# sourceMappingURL=Button.js.map
+
+//#endregion
+export { Button$1 as Button, buttonTheme, useButtonTheme };

package/build/components/Card.js

@@ -1,29 +1,18 @@
-"use strict";
-import {
-  createElement
-} from "react";
-import {
-  createComponentTheme
-} from "../theme/internals.js";
-export const useCardTheme = createComponentTheme("Card");
+import { createComponentTheme } from "../theme/internals/createComponentTheme.js";
+import { createElement } from "react";
+
+//#region source/components/Card.ts
+const useCardTheme = createComponentTheme("Card");
 const CARD_ELEMENT = "button";
-export function Card({
-  as: Component = CARD_ELEMENT,
-  className,
-  ref,
-  children,
-  ...rest
-}) {
-  let theme = useCardTheme();
-  let props = {
-    ref,
-    className: theme(null, className),
-    "data-component": "card",
-    ...rest
-  };
-  return createElement(Component, props, children);
+function Card({ as: Component = CARD_ELEMENT, className, ref, children, ...rest }) {
+	return createElement(Component, {
+		ref,
+		className: useCardTheme()(null, className),
+		"data-component": "card",
+		...rest
+	}, children);
 }
-export const cardTheme = {
-  className: "rounded-2 border border-neutral-100 p-4"
-};
-//# sourceMappingURL=Card.js.map
+const cardTheme = { className: "rounded-2 border border-neutral-100 p-4" };
+
+//#endregion
+export { Card, cardTheme, useCardTheme };

package/build/components/Checkbox.js

@@ -1,86 +1,74 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  Checkbox as HeadlessCheckbox
-} from "@headlessui/react";
-import { useCallback } from "react";
-import {
-  createComponentTheme
-} from "../theme/internals.js";
+import { createComponentTheme } from "../theme/internals/createComponentTheme.js";
 import { Icon } from "./Icon.js";
-import { useFormId } from "./internals.js";
+import { useFormId } from "./internals/useFormId.js";
 import { useField } from "./useField.js";
 import { useFieldName } from "./useFieldName.js";
-export const useCheckboxTheme = createComponentTheme("Checkbox", {
-  variants: {
-    disabled: [true, false]
-  },
-  elements: ["root", "icon"]
+import { Checkbox } from "@headlessui/react";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region source/components/Checkbox.tsx
+const useCheckboxTheme = createComponentTheme("Checkbox", {
+	variants: { disabled: [true, false] },
+	elements: ["root", "icon"]
 });
 const CHECKBOX_ELEMENT = "span";
-export function Checkbox({
-  disabled = false,
-  as = CHECKBOX_ELEMENT,
-  checked,
-  indeterminate,
-  autoFocus,
-  name,
-  className,
-  onChange,
-  ref,
-  ...rest
-}) {
-  let theme = useCheckboxTheme({ disabled });
-  let fieldName = useFieldName();
-  let field = useField();
-  let formId = useFormId();
-  let handleChange = useCallback(() => {
-    onChange?.(!checked);
-  }, [checked, onChange]);
-  if (field || fieldName) {
-    let props2 = {
-      as,
-      ref,
-      form: formId,
-      name: field?.name ?? fieldName,
-      indeterminate,
-      autoFocus,
-      className: theme.root("relative", className),
-      "data-component": "checkbox",
-      ...rest
-    };
-    return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props2, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
-  }
-  let props = {
-    as,
-    ref,
-    checked: Boolean(checked),
-    name,
-    indeterminate,
-    autoFocus,
-    className: theme.root("relative", className),
-    "data-component": "checkbox",
-    onChange: handleChange,
-    ...rest
-  };
-  return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
+function Checkbox$1({ disabled = false, as = CHECKBOX_ELEMENT, checked, indeterminate, autoFocus, name, className, onChange, ref, ...rest }) {
+	let theme = useCheckboxTheme({ disabled });
+	let fieldName = useFieldName();
+	let field = useField();
+	let formId = useFormId();
+	let handleChange = useCallback(() => {
+		onChange?.(!checked);
+	}, [checked, onChange]);
+	if (field || fieldName) return /* @__PURE__ */ jsx(Checkbox, {
+		as,
+		ref,
+		form: formId,
+		name: field?.name ?? fieldName,
+		indeterminate,
+		autoFocus,
+		className: theme.root("relative", className),
+		"data-component": "checkbox",
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			className: theme.icon(),
+			children: /* @__PURE__ */ jsx(Icon, { name: "Check" })
+		})
+	});
+	return /* @__PURE__ */ jsx(Checkbox, {
+		as,
+		ref,
+		checked: Boolean(checked),
+		name,
+		indeterminate,
+		autoFocus,
+		className: theme.root("relative", className),
+		"data-component": "checkbox",
+		onChange: handleChange,
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			className: theme.icon(),
+			children: /* @__PURE__ */ jsx(Icon, { name: "Check" })
+		})
+	});
 }
-export const checkboxTheme = {
-  classNames: {
-    root: "group/checkbox inline-block size-5 cursor-pointer",
-    icon: "flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-950 hover:group-data-[checked]/checkbox:*:text-white"
-  },
-  variants: {
-    disabled: {
-      true: {
-        root: "cursor-not-allowed",
-        icon: "*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-100 hover:group-data-[checked]/checkbox:*:text-white"
-      },
-      false: {
-        root: "",
-        icon: ""
-      }
-    }
-  }
+const checkboxTheme = {
+	classNames: {
+		root: "group/checkbox inline-block size-5 cursor-pointer",
+		icon: "flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-950 hover:group-data-[checked]/checkbox:*:text-white"
+	},
+	variants: { disabled: {
+		true: {
+			root: "cursor-not-allowed",
+			icon: "*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-100 hover:group-data-[checked]/checkbox:*:text-white"
+		},
+		false: {
+			root: "",
+			icon: ""
+		}
+	} }
 };
-//# sourceMappingURL=Checkbox.js.map
+
+//#endregion
+export { Checkbox$1 as Checkbox, checkboxTheme, useCheckboxTheme };

package/build/components/CheckboxField.js

@@ -1,22 +1,35 @@
-"use strict";
+import { createComponentTheme } from "../theme/internals/createComponentTheme.js";
+import { FieldContext } from "./internals/FieldContext.js";
+import { FieldNameContext } from "./internals/FieldNameContext.js";
+import { Field } from "@headlessui/react";
 import { jsx } from "react/jsx-runtime";
-import { Field as HeadlessField } from "@headlessui/react";
-import {
-  createComponentTheme
-} from "../theme/internals.js";
-import { FieldContext, FieldNameContext } from "./internals.js";
-export const useCheckboxFieldTheme = createComponentTheme("CheckboxField");
-export function CheckboxField({ field, name, className, children }) {
-  let theme = useCheckboxFieldTheme();
-  if (field) {
-    return /* @__PURE__ */ jsx(FieldContext, { value: field, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
-  }
-  if (name) {
-    return /* @__PURE__ */ jsx(FieldNameContext, { value: name, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
-  }
-  return /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), children });
+
+//#region source/components/CheckboxField.tsx
+const useCheckboxFieldTheme = createComponentTheme("CheckboxField");
+function CheckboxField({ field, name, className, children }) {
+	let theme = useCheckboxFieldTheme();
+	if (field) return /* @__PURE__ */ jsx(FieldContext, {
+		value: field,
+		children: /* @__PURE__ */ jsx(Field, {
+			className: theme(null, className),
+			"data-component": "checkbox-field",
+			children
+		})
+	});
+	if (name) return /* @__PURE__ */ jsx(FieldNameContext, {
+		value: name,
+		children: /* @__PURE__ */ jsx(Field, {
+			className: theme(null, className),
+			"data-component": "checkbox-field",
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Field, {
+		className: theme(null, className),
+		children
+	});
 }
-export const checkboxFieldTheme = {
-  className: "grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2"
-};
-//# sourceMappingURL=CheckboxField.js.map
+const checkboxFieldTheme = { className: "grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2" };
+
+//#endregion
+export { CheckboxField, checkboxFieldTheme, useCheckboxFieldTheme };