@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/forms/radio-group/radio-group.css

@@ -0,0 +1,222 @@
+.puzzle-radio-group {
+  align-items: stretch;
+  gap: var(--puzzle-space-2, .5rem);
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  font-family: var(--puzzle-font-family-body, inherit);
+  border: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.puzzle-radio-group__legend {
+  width: 100%;
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  padding: 0;
+  display: block;
+}
+
+.puzzle-radio-group__required {
+  color: var(--puzzle-color-danger);
+  margin-inline-start: .2em;
+}
+
+.puzzle-radio-group__options {
+  align-items: flex-start;
+  gap: var(--puzzle-space-3, .75rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-radio-group__options[data-orientation="horizontal"] {
+  flex-flow: wrap;
+  align-items: flex-start;
+}
+
+.puzzle-radio {
+  align-items: flex-start;
+  gap: var(--puzzle-space-3, .75rem);
+  width: fit-content;
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-radio--disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.puzzle-radio__input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: inherit;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-radio__control {
+  box-sizing: border-box;
+  width: var(--puzzle-radio-size, 1.125rem);
+  height: var(--puzzle-radio-size, 1.125rem);
+  margin-top: var(--puzzle-radio-offset, .125rem);
+  border: 1.5px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-full, 9999px);
+  background: var(--puzzle-color-surface);
+  transition: background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  flex: none;
+  place-items: center;
+  display: inline-grid;
+  position: relative;
+}
+
+.puzzle-radio__control:after {
+  background: var(--puzzle-color-primary);
+  content: "";
+  width: 50%;
+  height: 50%;
+  transition: transform var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  border-radius: 50%;
+  display: block;
+  transform: scale(0);
+}
+
+.puzzle-radio__input:checked + .puzzle-radio__control {
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-radio__input:checked + .puzzle-radio__control:after {
+  transform: scale(1);
+}
+
+.puzzle-radio__input:focus-visible + .puzzle-radio__control {
+  outline: 2px solid var(--puzzle-color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.puzzle-radio:hover:not([data-disabled="true"]) .puzzle-radio__control {
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-radio__content {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-radio__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-radio__description {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-normal, 400);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-radio-group__description, .puzzle-radio-group__error {
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-radio-group__description {
+  color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-radio-group__error {
+  color: var(--puzzle-color-danger);
+}
+
+.puzzle-radio-group[data-size="sm"] {
+  --puzzle-radio-size: .875rem;
+  --puzzle-radio-offset: .125rem;
+}
+
+.puzzle-radio-group[data-size="md"] {
+  --puzzle-radio-size: 1.125rem;
+  --puzzle-radio-offset: .125rem;
+}
+
+.puzzle-radio-group[data-size="lg"] {
+  --puzzle-radio-size: 1.375rem;
+  --puzzle-radio-offset: .0625rem;
+}
+
+.puzzle-radio-group[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.puzzle-radio-group[data-disabled="true"] .puzzle-radio__control {
+  background: var(--puzzle-color-surface-sunken);
+}
+
+.puzzle-radio-group[data-invalid="true"] .puzzle-radio__control {
+  border-color: var(--puzzle-color-danger);
+}
+
+@media (forced-colors: active) {
+  .puzzle-radio--disabled {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .puzzle-radio--disabled .puzzle-radio__label, .puzzle-radio--disabled .puzzle-radio__description {
+    color: graytext;
+  }
+
+  .puzzle-radio__control {
+    background: canvas;
+    border-color: buttontext;
+  }
+
+  .puzzle-radio__control:after {
+    background: highlight;
+  }
+
+  .puzzle-radio__input:checked + .puzzle-radio__control {
+    border-color: highlight;
+  }
+
+  .puzzle-radio__input:disabled + .puzzle-radio__control {
+    background: canvas;
+    border-color: graytext;
+  }
+
+  .puzzle-radio__input:disabled + .puzzle-radio__control:after {
+    background: graytext;
+  }
+
+  .puzzle-radio__input:focus-visible + .puzzle-radio__control {
+    outline-color: highlight;
+  }
+
+  .puzzle-radio-group__error {
+    color: mark;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-radio__control, .puzzle-radio__control:after {
+    transition: none;
+  }
+}

package/dist/components/forms/radio-group/radio-group.types.d.cts

@@ -0,0 +1,51 @@
+import { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, ReactNode } from "react";
+type RadioGroupOrientation = "horizontal" | "vertical";
+type RadioGroupSize = "sm" | "md" | "lg";
+type RadioGroupProps = Omit<ComponentPropsWithoutRef<"fieldset">, "children" | "disabled" | "dir"> & {
+  /** Currently selected value. Enables controlled usage. */
+  value?: string | null;
+  /** Initial selected value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called when another option is selected. */
+  onValueChange?: (value: string) => void;
+  /** Name shared by all native radio inputs. */
+  name?: string;
+  /** Visible group label rendered as a legend. */
+  label?: ReactNode;
+  /** Supporting description for the group. */
+  description?: ReactNode;
+  /** Validation error message. */
+  error?: ReactNode | boolean;
+  /** Explicitly controls the invalid state. */
+  invalid?: boolean;
+  /** Marks the group as required. */
+  required?: boolean;
+  /** Disables all options. */
+  disabled?: boolean;
+  /** Layout direction. Defaults to vertical. */
+  orientation?: RadioGroupOrientation;
+  /** Visual size. Defaults to md. */
+  size?: RadioGroupSize;
+  /** Text direction for keyboard navigation. */
+  dir?: "ltr" | "rtl";
+  /** Whether keyboard navigation wraps around. */
+  loop?: boolean;
+  children: ReactNode;
+};
+type RadioProps = Omit<ComponentPropsWithRef<"input">, "children" | "type" | "name" | "value" | "checked" | "defaultChecked" | "disabled" | "required" | "size" | "className" | "style" | "tabIndex" | "form"> & {
+  /** Unique option value within the group. */
+  value: string;
+  /** Visible option label. */
+  label?: ReactNode;
+  /** Alternative to label for JSX composition. */
+  children?: ReactNode;
+  /** Supporting text displayed below the label. */
+  description?: ReactNode;
+  /** Disables this option individually. */
+  disabled?: boolean;
+  /** Class applied to the root label. */
+  className?: string;
+  /** Inline styles applied to the root label. */
+  style?: CSSProperties;
+};
+export type { RadioGroupOrientation, RadioGroupProps, RadioGroupSize, RadioProps };

package/dist/components/forms/radio-group/radio-group.types.d.ts

@@ -0,0 +1,51 @@
+import { CSSProperties, ComponentPropsWithRef, ComponentPropsWithoutRef, ReactNode } from "react";
+type RadioGroupOrientation = "horizontal" | "vertical";
+type RadioGroupSize = "sm" | "md" | "lg";
+type RadioGroupProps = Omit<ComponentPropsWithoutRef<"fieldset">, "children" | "disabled" | "dir"> & {
+  /** Currently selected value. Enables controlled usage. */
+  value?: string | null;
+  /** Initial selected value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called when another option is selected. */
+  onValueChange?: (value: string) => void;
+  /** Name shared by all native radio inputs. */
+  name?: string;
+  /** Visible group label rendered as a legend. */
+  label?: ReactNode;
+  /** Supporting description for the group. */
+  description?: ReactNode;
+  /** Validation error message. */
+  error?: ReactNode | boolean;
+  /** Explicitly controls the invalid state. */
+  invalid?: boolean;
+  /** Marks the group as required. */
+  required?: boolean;
+  /** Disables all options. */
+  disabled?: boolean;
+  /** Layout direction. Defaults to vertical. */
+  orientation?: RadioGroupOrientation;
+  /** Visual size. Defaults to md. */
+  size?: RadioGroupSize;
+  /** Text direction for keyboard navigation. */
+  dir?: "ltr" | "rtl";
+  /** Whether keyboard navigation wraps around. */
+  loop?: boolean;
+  children: ReactNode;
+};
+type RadioProps = Omit<ComponentPropsWithRef<"input">, "children" | "type" | "name" | "value" | "checked" | "defaultChecked" | "disabled" | "required" | "size" | "className" | "style" | "tabIndex" | "form"> & {
+  /** Unique option value within the group. */
+  value: string;
+  /** Visible option label. */
+  label?: ReactNode;
+  /** Alternative to label for JSX composition. */
+  children?: ReactNode;
+  /** Supporting text displayed below the label. */
+  description?: ReactNode;
+  /** Disables this option individually. */
+  disabled?: boolean;
+  /** Class applied to the root label. */
+  className?: string;
+  /** Inline styles applied to the root label. */
+  style?: CSSProperties;
+};
+export type { RadioGroupOrientation, RadioGroupProps, RadioGroupSize, RadioProps };

package/dist/components/forms/radio-group/radio-group.utils.cjs

@@ -0,0 +1,22 @@
+// src/components/forms/radio-group/radio-group.utils.ts
+const mergeDescribedBy = (...values) => {
+	const ids = /* @__PURE__ */ new Set();
+	for (const value of values) {
+		if (!value) continue;
+		for (const id of value.trim().split(/\s+/)) if (id) ids.add(id);
+	}
+	return ids.size > 0 ? Array.from(ids).join(" ") : void 0;
+};
+const resolveRadioGroupError = (error, invalid) => {
+	const errorContent = error === true ? "Invalid value" : error;
+	const isInvalid = invalid ?? (error !== void 0 && error !== null && error !== false);
+	return {
+		isInvalid,
+		errorContent,
+		hasError: isInvalid && errorContent !== void 0 && errorContent !== null && errorContent !== false
+	};
+};
+exports.mergeDescribedBy = mergeDescribedBy;
+exports.resolveRadioGroupError = resolveRadioGroupError;
+
+//# sourceMappingURL=radio-group.utils.cjs.map

package/dist/components/forms/radio-group/radio-group.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.utils.cjs","names":[],"sources":["../../../../src/components/forms/radio-group/radio-group.utils.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype RadioGroupErrorState = {\n  isInvalid: boolean;\n  errorContent: ReactNode | undefined;\n  hasError: boolean;\n};\n\nconst mergeDescribedBy = (\n  ...values: Array<string | undefined>\n): string | undefined => {\n  const ids = new Set<string>();\n\n  for (const value of values) {\n    if (!value) {\n      continue;\n    }\n\n    for (const id of value.trim().split(/\\s+/)) {\n      if (id) {\n        ids.add(id);\n      }\n    }\n  }\n\n  return ids.size > 0 ? Array.from(ids).join(\" \") : undefined;\n};\n\nconst resolveRadioGroupError = (\n  error: ReactNode | boolean | undefined,\n  invalid?: boolean,\n): RadioGroupErrorState => {\n  const errorContent = error === true ? \"Invalid value\" : error;\n\n  const isInvalid =\n    invalid ?? (error !== undefined && error !== null && error !== false);\n\n  const hasError =\n    isInvalid &&\n    errorContent !== undefined &&\n    errorContent !== null &&\n    errorContent !== false;\n\n  return {\n    isInvalid,\n    errorContent,\n    hasError,\n  };\n};\n\nexport { mergeDescribedBy, resolveRadioGroupError, type RadioGroupErrorState };\n"],"mappings":";AAQA,MAAM,oBACJ,GAAG,WACoB;CACvB,MAAM,sBAAM,IAAI,IAAY;CAE5B,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,CAAC,OACH;EAGF,KAAK,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,MAAM,KAAK,GACvC,IAAI,IACF,IAAI,IAAI,EAAE;CAGhB;CAEA,OAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;AACpD;AAEA,MAAM,0BACJ,OACA,YACyB;CACzB,MAAM,eAAe,UAAU,OAAO,kBAAkB;CAExD,MAAM,YACJ,YAAY,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAQjE,OAAO;EACL;EACA;EACA,UARA,aACA,iBAAiB,KAAA,KACjB,iBAAiB,QACjB,iBAAiB;CAMnB;AACF"}

package/dist/components/forms/radio-group/radio-group.utils.js

@@ -0,0 +1,21 @@
+// src/components/forms/radio-group/radio-group.utils.ts
+const mergeDescribedBy = (...values) => {
+	const ids = /* @__PURE__ */ new Set();
+	for (const value of values) {
+		if (!value) continue;
+		for (const id of value.trim().split(/\s+/)) if (id) ids.add(id);
+	}
+	return ids.size > 0 ? Array.from(ids).join(" ") : void 0;
+};
+const resolveRadioGroupError = (error, invalid) => {
+	const errorContent = error === true ? "Invalid value" : error;
+	const isInvalid = invalid ?? (error !== void 0 && error !== null && error !== false);
+	return {
+		isInvalid,
+		errorContent,
+		hasError: isInvalid && errorContent !== void 0 && errorContent !== null && errorContent !== false
+	};
+};
+export { mergeDescribedBy, resolveRadioGroupError };
+
+//# sourceMappingURL=radio-group.utils.js.map

package/dist/components/forms/radio-group/radio-group.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.utils.js","names":[],"sources":["../../../../src/components/forms/radio-group/radio-group.utils.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype RadioGroupErrorState = {\n  isInvalid: boolean;\n  errorContent: ReactNode | undefined;\n  hasError: boolean;\n};\n\nconst mergeDescribedBy = (\n  ...values: Array<string | undefined>\n): string | undefined => {\n  const ids = new Set<string>();\n\n  for (const value of values) {\n    if (!value) {\n      continue;\n    }\n\n    for (const id of value.trim().split(/\\s+/)) {\n      if (id) {\n        ids.add(id);\n      }\n    }\n  }\n\n  return ids.size > 0 ? Array.from(ids).join(\" \") : undefined;\n};\n\nconst resolveRadioGroupError = (\n  error: ReactNode | boolean | undefined,\n  invalid?: boolean,\n): RadioGroupErrorState => {\n  const errorContent = error === true ? \"Invalid value\" : error;\n\n  const isInvalid =\n    invalid ?? (error !== undefined && error !== null && error !== false);\n\n  const hasError =\n    isInvalid &&\n    errorContent !== undefined &&\n    errorContent !== null &&\n    errorContent !== false;\n\n  return {\n    isInvalid,\n    errorContent,\n    hasError,\n  };\n};\n\nexport { mergeDescribedBy, resolveRadioGroupError, type RadioGroupErrorState };\n"],"mappings":";AAQA,MAAM,oBACJ,GAAG,WACoB;CACvB,MAAM,sBAAM,IAAI,IAAY;CAE5B,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,CAAC,OACH;EAGF,KAAK,MAAM,MAAM,MAAM,KAAK,CAAC,CAAC,MAAM,KAAK,GACvC,IAAI,IACF,IAAI,IAAI,EAAE;CAGhB;CAEA,OAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;AACpD;AAEA,MAAM,0BACJ,OACA,YACyB;CACzB,MAAM,eAAe,UAAU,OAAO,kBAAkB;CAExD,MAAM,YACJ,YAAY,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAQjE,OAAO;EACL;EACA;EACA,UARA,aACA,iBAAiB,KAAA,KACjB,iBAAiB,QACjB,iBAAiB;CAMnB;AACF"}