@helpwave/hightide 0.1.6 → 0.1.7

package/dist/components/user-action/Checkbox.mjs

@@ -0,0 +1,122 @@
+// src/components/user-action/Checkbox.tsx
+import { useState } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check, Minus } from "lucide-react";
+import clsx2 from "clsx";
+
+// src/components/user-action/Label.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var styleMapping = {
+  labelSmall: "textstyle-label-sm",
+  labelMedium: "textstyle-label-md",
+  labelBig: "textstyle-label-lg"
+};
+var Label = ({
+  children,
+  name,
+  labelType = "labelSmall",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("label", { ...props, className: clsx(styleMapping[labelType], className), children: children ? children : name });
+};
+
+// src/components/user-action/Checkbox.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var checkboxSizeMapping = {
+  small: "size-4",
+  medium: "size-6",
+  large: "size-8"
+};
+var checkboxIconSizeMapping = {
+  small: "size-3",
+  medium: "size-5",
+  large: "size-7"
+};
+var Checkbox = ({
+  id,
+  label,
+  checked,
+  disabled,
+  onChange,
+  onChangeTristate,
+  size = "medium",
+  className = "",
+  containerClassName
+}) => {
+  const usedSizeClass = checkboxSizeMapping[size];
+  const innerIconSize = checkboxIconSizeMapping[size];
+  const propagateChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
+    }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+  };
+  const changeValue = () => {
+    const newValue = checked === "indeterminate" ? false : !checked;
+    propagateChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx2("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ jsx2(
+      CheckboxPrimitive.Root,
+      {
+        onCheckedChange: propagateChange,
+        checked,
+        disabled,
+        id,
+        className: clsx2(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
+          "text-disabled-text border-disabled-text bg-disabled-background": disabled,
+          "bg-surface": !disabled && !checked,
+          "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
+          "hover:border-primary focus:hover:border-primary": !checked
+        }, className),
+        children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ jsx2(Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ jsx2(Minus, { className: innerIconSize })
+        ] })
+      }
+    ),
+    label && /* @__PURE__ */ jsx2(
+      Label,
+      {
+        ...label,
+        className: clsx2("cursor-pointer", label.className),
+        htmlFor: id,
+        onClick: changeValue
+      }
+    )
+  ] });
+};
+var CheckboxUncontrolled = ({
+  onChange,
+  onChangeTristate,
+  defaultValue = false,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(defaultValue);
+  const handleChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
+    }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+    setChecked(checked2);
+  };
+  return /* @__PURE__ */ jsx2(
+    Checkbox,
+    {
+      ...props,
+      checked,
+      onChangeTristate: handleChange
+    }
+  );
+};
+export {
+  Checkbox,
+  CheckboxUncontrolled
+};
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/user-action/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/user-action/Checkbox.tsx","../../../src/components/user-action/Label.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { CheckedState } from '@radix-ui/react-checkbox'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check, Minus } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\ntype CheckBoxSize = 'small' | 'medium' | 'large'\n\nconst checkboxSizeMapping: Record<CheckBoxSize, string> = {\n  small: 'size-4',\n  medium: 'size-6',\n  large: 'size-8',\n}\n\nconst checkboxIconSizeMapping: Record<CheckBoxSize, string> = {\n  small: 'size-3',\n  medium: 'size-5',\n  large: 'size-7',\n}\n\ntype CheckboxProps = {\n  /** used for the label's `for` attribute */\n  id?: string,\n  label?: Omit<LabelProps, 'id'>,\n  /**\n   * @default false\n   */\n  checked: CheckedState,\n  disabled?: boolean,\n  onChange?: (checked: boolean) => void,\n  onChangeTristate?: (checked: CheckedState) => void,\n  size?: CheckBoxSize,\n  className?: string,\n  containerClassName?: string,\n}\n\n/**\n * A Tristate checkbox\n *\n * The state is managed by the parent\n */\nconst Checkbox = ({\n                    id,\n                    label,\n                    checked,\n                    disabled,\n                    onChange,\n                    onChangeTristate,\n                    size = 'medium',\n                    className = '',\n                    containerClassName\n                  }: CheckboxProps) => {\n  const usedSizeClass = checkboxSizeMapping[size]\n  const innerIconSize = checkboxIconSizeMapping[size]\n\n  const propagateChange = (checked: CheckedState) => {\n    if (onChangeTristate) {\n      onChangeTristate(checked)\n    }\n    if (onChange) {\n      onChange(checked === 'indeterminate' ? false : checked)\n    }\n  }\n\n  const changeValue = () => {\n    const newValue = checked === 'indeterminate' ? false : !checked\n    propagateChange(newValue)\n  }\n\n  return (\n    <div className={clsx('row justify-center items-center', containerClassName)}>\n      <CheckboxPrimitive.Root\n        onCheckedChange={propagateChange}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        className={clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {\n          'text-disabled-text border-disabled-text bg-disabled-background': disabled,\n          'bg-surface': !disabled && !checked,\n          'bg-primary/30 border-primary text-primary': checked === true || checked === 'indeterminate',\n          'hover:border-primary focus:hover:border-primary': !checked\n        }, className)}\n      >\n        <CheckboxPrimitive.Indicator>\n          {checked === true && <Check className={innerIconSize}/>}\n          {checked === 'indeterminate' && <Minus className={innerIconSize}/>}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      {label && (\n        <Label {...label} className={clsx('cursor-pointer', label.className)} htmlFor={id}\n               onClick={changeValue}/>\n      )}\n    </div>\n  )\n}\n\ntype CheckboxUncontrolledProps = Omit<CheckboxProps, 'value' | 'checked'> & {\n  /**\n   * @default false\n   */\n  defaultValue?: CheckedState,\n}\n\n/**\n * A Tristate checkbox\n *\n * The state is managed by this component\n */\nconst CheckboxUncontrolled = ({\n                                onChange,\n                                onChangeTristate,\n                                defaultValue = false,\n                                ...props\n                              }: CheckboxUncontrolledProps) => {\n  const [checked, setChecked] = useState(defaultValue)\n\n  const handleChange = (checked: CheckedState) => {\n    if (onChangeTristate) {\n      onChangeTristate(checked)\n    }\n    if (onChange) {\n      onChange(checked === 'indeterminate' ? false : checked)\n    }\n    setChecked(checked)\n  }\n\n  return (\n    <Checkbox\n      {...props}\n      checked={checked}\n      onChangeTristate={handleChange}\n    />\n  )\n}\n\nexport {\n  CheckboxProps,\n  CheckboxUncontrolled,\n  Checkbox,\n}\n","import type { LabelHTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\n\nconst styleMapping: Record<LabelType, string> = {\n  labelSmall: 'textstyle-label-sm',\n  labelMedium: 'textstyle-label-md',\n  labelBig: 'textstyle-label-lg',\n}\n\nexport type LabelProps = {\n  /** The text for the label */\n  name?: string,\n  /** The styling for the label */\n  labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/**\n * A Label component\n */\nexport const Label = ({\n                        children,\n                        name,\n                        labelType = 'labelSmall',\n                        className,\n                        ...props\n                      }: LabelProps) => {\n  return (\n    <label {...props} className={clsx(styleMapping[labelType], className)}>\n      {children ? children : name}\n    </label>\n  )\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAEzB,YAAY,uBAAuB;AACnC,SAAS,OAAO,aAAa;AAC7B,OAAOA,WAAU;;;ACHjB,OAAO,UAAU;AA4Bb;AAxBJ,IAAM,eAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACZ;AAYO,IAAM,QAAQ,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAkB;AACtC,SACE,oBAAC,WAAO,GAAG,OAAO,WAAW,KAAK,aAAa,SAAS,GAAG,SAAS,GACjE,qBAAW,WAAW,MACzB;AAEJ;;;ADoDQ,SACuB,OAAAC,MADvB;AA3ER,IAAM,sBAAoD;AAAA,EACxD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,0BAAwD;AAAA,EAC5D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAuBA,IAAM,WAAW,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AACF,MAAqB;AACrC,QAAM,gBAAgB,oBAAoB,IAAI;AAC9C,QAAM,gBAAgB,wBAAwB,IAAI;AAElD,QAAM,kBAAkB,CAACC,aAA0B;AACjD,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW,YAAY,kBAAkB,QAAQ,CAAC;AACxD,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE,qBAAC,SAAI,WAAWC,MAAK,mCAAmC,kBAAkB,GACxE;AAAA,oBAAAF;AAAA,MAAmB;AAAA,MAAlB;AAAA,QACC,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAWE,MAAK,eAAe,mEAAmE;AAAA,UAChG,kEAAkE;AAAA,UAClE,cAAc,CAAC,YAAY,CAAC;AAAA,UAC5B,6CAA6C,YAAY,QAAQ,YAAY;AAAA,UAC7E,mDAAmD,CAAC;AAAA,QACtD,GAAG,SAAS;AAAA,QAEZ,+BAAmB,6BAAlB,EACE;AAAA,sBAAY,QAAQ,gBAAAF,KAAC,SAAM,WAAW,eAAc;AAAA,UACpD,YAAY,mBAAmB,gBAAAA,KAAC,SAAM,WAAW,eAAc;AAAA,WAClE;AAAA;AAAA,IACF;AAAA,IACC,SACC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAAO,GAAG;AAAA,QAAO,WAAWE,MAAK,kBAAkB,MAAM,SAAS;AAAA,QAAG,SAAS;AAAA,QACxE,SAAS;AAAA;AAAA,IAAY;AAAA,KAEhC;AAEJ;AAcA,IAAM,uBAAuB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAiC;AAC7D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AAEnD,QAAM,eAAe,CAACD,aAA0B;AAC9C,QAAI,kBAAkB;AACpB,uBAAiBA,QAAO;AAAA,IAC1B;AACA,QAAI,UAAU;AACZ,eAASA,aAAY,kBAAkB,QAAQA,QAAO;AAAA,IACxD;AACA,eAAWA,QAAO;AAAA,EACpB;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,kBAAkB;AAAA;AAAA,EACpB;AAEJ;","names":["clsx","jsx","checked","clsx"]}

package/dist/components/user-action/{DateAndTimePicker.d.cts → DateAndTimePicker.d.mts}

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsForTranslation } from '../../localization/useTranslation.cjs';
-import { TimePickerProps } from '../date/TimePicker.cjs';
-import { DatePickerProps } from '../date/DatePicker.cjs';
-import '../../localization/util.cjs';
-import '../date/YearMonthPicker.cjs';
-import '../date/DayPicker.cjs';
-import '../../util/date.cjs';
+import { PropsForTranslation } from '../../localization/useTranslation.mjs';
+import { TimePickerProps } from '../date/TimePicker.mjs';
+import { DatePickerProps } from '../date/DatePicker.mjs';
+import '../../localization/util.mjs';
+import '../date/YearMonthPicker.mjs';
+import '../date/DayPicker.mjs';
+import '../../util/date.mjs';
 
 type TimeTranslation = {
     clear: string;