@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/currency-selector.js

@@ -0,0 +1,192 @@
+"use client";
+import {
+  useUncontrolled
+} from "./chunk-QZHSHSVV.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-SFNJGF6M.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/currency-selector.tsx
+import { cva } from "class-variance-authority";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_FLAG = [
+  { color: "#1f8f55" },
+  { color: "#ffffff" },
+  { color: "#1f8f55" }
+];
+var currencySelectorTriggerVariants = cva(
+  "group/currency-selector inline-flex w-fit shrink-0 items-center rounded-full border-0 font-bold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 data-popup-open:text-fg-primary [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-current",
+  {
+    variants: {
+      size: {
+        sm: "h-8 gap-1.5 px-3 text-gdt-xs",
+        md: "h-11 gap-2 px-4 text-gdt-sm",
+        lg: "h-12 gap-2.5 px-5 text-gdt-md"
+      },
+      withBackground: {
+        true: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-popup-open:bg-action-tertiary-hover",
+        false: "bg-transparent px-0 text-fg-primary hover:text-fg-brand active:text-fg-brand data-popup-open:bg-transparent"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      withBackground: true
+    }
+  }
+);
+function findOption(options, value) {
+  return options.find((option) => option.code === value);
+}
+function CurrencyFlag({
+  flag = DEFAULT_FLAG,
+  label,
+  className
+}) {
+  const total = flag.reduce((sum, stripe) => sum + (stripe.size ?? 1), 0);
+  let cursor = 0;
+  const stops = flag.flatMap((stripe) => {
+    const start = cursor;
+    cursor += (stripe.size ?? 1) / total * 100;
+    return [
+      `${stripe.color} ${start.toFixed(2)}%`,
+      `${stripe.color} ${cursor.toFixed(2)}%`
+    ];
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": label ?? "Currency flag",
+      "data-slot": "currency-flag",
+      className: cn(
+        "inline-block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] bg-cover shadow-[inset_0_0_0_1px_rgb(0_0_0/0.04)]",
+        className
+      ),
+      style: { backgroundImage: `linear-gradient(90deg, ${stops.join(", ")})` }
+    }
+  );
+}
+function CurrencySelector({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  size = "md",
+  withBackground = true,
+  showFlag = true,
+  showOptionFlags = true,
+  contentClassName,
+  className,
+  placeholder = "Select currency",
+  type = "button",
+  ...props
+}) {
+  const fallbackValue = options[0]?.code;
+  const [selectedValue, setSelectedValue] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: fallbackValue,
+    onChange: (nextValue) => {
+      const nextOption = findOption(options, nextValue);
+      if (nextOption) {
+        onValueChange?.(nextValue, nextOption);
+      }
+    }
+  });
+  const selectedOption = findOption(options, selectedValue);
+  const handleValueChange = (nextValue) => {
+    if (nextValue) {
+      setSelectedValue(nextValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: selectedValue,
+      onValueChange: handleValueChange,
+      open,
+      defaultOpen,
+      onOpenChange,
+      size,
+      children: [
+        /* @__PURE__ */ jsxs(
+          SelectTrigger,
+          {
+            type,
+            unstyled: true,
+            className: cn(
+              currencySelectorTriggerVariants({
+                size,
+                withBackground
+              }),
+              className
+            ),
+            ...props,
+            children: [
+              showFlag && selectedOption ? /* @__PURE__ */ jsx(
+                CurrencyFlag,
+                {
+                  flag: selectedOption.flag,
+                  label: `${selectedOption.countryCode ?? selectedOption.code} flag`
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(SelectValue, { placeholder, children: selectedOption?.code ?? placeholder })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectContent,
+          {
+            align: "start",
+            sideOffset: 8,
+            className: cn(
+              "w-65 rounded-[18px] border-line-subtle bg-surface-overlay p-2 shadow-3",
+              contentClassName
+            ),
+            children: options.map((option) => /* @__PURE__ */ jsxs(
+              SelectItem,
+              {
+                value: option.code,
+                className: "min-h-12 rounded-lg px-3 text-gdt-sm data-selected:bg-surface-brand-subtle data-selected:font-normal data-selected:text-fg-brand data-highlighted:bg-surface-brand-subtle",
+                children: [
+                  showOptionFlags ? /* @__PURE__ */ jsx(
+                    CurrencyFlag,
+                    {
+                      flag: option.flag,
+                      label: `${option.countryCode ?? option.code} flag`
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                    option.code,
+                    " - ",
+                    option.label
+                  ] }),
+                  option.code === selectedValue ? /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto size-4 text-fg-brand" }) : null
+                ]
+              },
+              option.code
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CurrencyFlag,
+  CurrencySelector,
+  currencySelectorTriggerVariants
+};
+//# sourceMappingURL=currency-selector.js.map

package/dist/currency-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/currency-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { CheckIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"./lib/cn\";\nimport { useUncontrolled } from \"./lib/use-uncontrolled\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"./select\";\n\ntype CurrencyFlagStripe = {\n\tcolor: string;\n\tsize?: number;\n};\n\ntype CurrencySelectorOption = {\n\tcode: string;\n\tlabel: string;\n\tcountryCode?: string;\n\tflag?: readonly CurrencyFlagStripe[];\n};\n\ntype CurrencySelectorSize = NonNullable<\n\tVariantProps<typeof currencySelectorTriggerVariants>[\"size\"]\n>;\n\ntype CurrencySelectorProps = Omit<\n\tReact.ComponentProps<\"button\">,\n\t\"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n> & {\n\toptions: readonly CurrencySelectorOption[];\n\tvalue?: string;\n\tdefaultValue?: string;\n\tonValueChange?: (value: string, option: CurrencySelectorOption) => void;\n\topen?: boolean;\n\tdefaultOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tsize?: CurrencySelectorSize;\n\twithBackground?: boolean;\n\tshowFlag?: boolean;\n\tshowOptionFlags?: boolean;\n\tcontentClassName?: string;\n\tplaceholder?: string;\n};\n\nconst DEFAULT_FLAG: readonly CurrencyFlagStripe[] = [\n\t{ color: \"#1f8f55\" },\n\t{ color: \"#ffffff\" },\n\t{ color: \"#1f8f55\" },\n];\n\nconst currencySelectorTriggerVariants = cva(\n\t\"group/currency-selector inline-flex w-fit shrink-0 items-center rounded-full border-0 font-bold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 data-popup-open:text-fg-primary [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-current\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"h-8 gap-1.5 px-3 text-gdt-xs\",\n\t\t\t\tmd: \"h-11 gap-2 px-4 text-gdt-sm\",\n\t\t\t\tlg: \"h-12 gap-2.5 px-5 text-gdt-md\",\n\t\t\t},\n\t\t\twithBackground: {\n\t\t\t\ttrue: \"bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-popup-open:bg-action-tertiary-hover\",\n\t\t\t\tfalse:\n\t\t\t\t\t\"bg-transparent px-0 text-fg-primary hover:text-fg-brand active:text-fg-brand data-popup-open:bg-transparent\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\twithBackground: true,\n\t\t},\n\t},\n);\n\nfunction findOption(\n\toptions: readonly CurrencySelectorOption[],\n\tvalue: string | undefined,\n) {\n\treturn options.find((option) => option.code === value);\n}\n\nfunction CurrencyFlag({\n\tflag = DEFAULT_FLAG,\n\tlabel,\n\tclassName,\n}: {\n\tflag?: readonly CurrencyFlagStripe[];\n\tlabel?: string;\n\tclassName?: string;\n}) {\n\tconst total = flag.reduce((sum, stripe) => sum + (stripe.size ?? 1), 0);\n\tlet cursor = 0;\n\tconst stops = flag.flatMap((stripe) => {\n\t\tconst start = cursor;\n\t\tcursor += ((stripe.size ?? 1) / total) * 100;\n\n\t\treturn [\n\t\t\t`${stripe.color} ${start.toFixed(2)}%`,\n\t\t\t`${stripe.color} ${cursor.toFixed(2)}%`,\n\t\t];\n\t});\n\n\treturn (\n\t\t<span\n\t\t\trole=\"img\"\n\t\t\taria-label={label ?? \"Currency flag\"}\n\t\t\tdata-slot=\"currency-flag\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] bg-cover shadow-[inset_0_0_0_1px_rgb(0_0_0/0.04)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ backgroundImage: `linear-gradient(90deg, ${stops.join(\", \")})` }}\n\t\t/>\n\t);\n}\n\nfunction CurrencySelector({\n\toptions,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tsize = \"md\",\n\twithBackground = true,\n\tshowFlag = true,\n\tshowOptionFlags = true,\n\tcontentClassName,\n\tclassName,\n\tplaceholder = \"Select currency\",\n\ttype = \"button\",\n\t...props\n}: CurrencySelectorProps) {\n\tconst fallbackValue = options[0]?.code;\n\tconst [selectedValue, setSelectedValue] = useUncontrolled({\n\t\tvalue,\n\t\tdefaultValue,\n\t\tfinalValue: fallbackValue,\n\t\tonChange: (nextValue) => {\n\t\t\tconst nextOption = findOption(options, nextValue);\n\n\t\t\tif (nextOption) {\n\t\t\t\tonValueChange?.(nextValue, nextOption);\n\t\t\t}\n\t\t},\n\t});\n\tconst selectedOption = findOption(options, selectedValue);\n\tconst handleValueChange = (nextValue: string | null) => {\n\t\tif (nextValue) {\n\t\t\tsetSelectedValue(nextValue);\n\t\t}\n\t};\n\n\treturn (\n\t\t<Select\n\t\t\tvalue={selectedValue}\n\t\t\tonValueChange={handleValueChange}\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<SelectTrigger\n\t\t\t\ttype={type}\n\t\t\t\tunstyled\n\t\t\t\tclassName={cn(\n\t\t\t\t\tcurrencySelectorTriggerVariants({\n\t\t\t\t\t\tsize,\n\t\t\t\t\t\twithBackground,\n\t\t\t\t\t}),\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{showFlag && selectedOption ? (\n\t\t\t\t\t<CurrencyFlag\n\t\t\t\t\t\tflag={selectedOption.flag}\n\t\t\t\t\t\tlabel={`${selectedOption.countryCode ?? selectedOption.code} flag`}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t<SelectValue placeholder={placeholder}>\n\t\t\t\t\t{selectedOption?.code ?? placeholder}\n\t\t\t\t</SelectValue>\n\t\t\t</SelectTrigger>\n\t\t\t<SelectContent\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={8}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"w-65 rounded-[18px] border-line-subtle bg-surface-overlay p-2 shadow-3\",\n\t\t\t\t\tcontentClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{options.map((option) => (\n\t\t\t\t\t<SelectItem\n\t\t\t\t\t\tkey={option.code}\n\t\t\t\t\t\tvalue={option.code}\n\t\t\t\t\t\tclassName=\"min-h-12 rounded-lg px-3 text-gdt-sm data-selected:bg-surface-brand-subtle data-selected:font-normal data-selected:text-fg-brand data-highlighted:bg-surface-brand-subtle\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{showOptionFlags ? (\n\t\t\t\t\t\t\t<CurrencyFlag\n\t\t\t\t\t\t\t\tflag={option.flag}\n\t\t\t\t\t\t\t\tlabel={`${option.countryCode ?? option.code} flag`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<span className=\"min-w-0 flex-1 truncate\">\n\t\t\t\t\t\t\t{option.code} - {option.label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{option.code === selectedValue ? (\n\t\t\t\t\t\t\t<CheckIcon className=\"ml-auto size-4 text-fg-brand\" />\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</SelectItem>\n\t\t\t\t))}\n\t\t\t</SelectContent>\n\t\t</Select>\n\t);\n}\n\nexport {\n\tCurrencyFlag,\n\tCurrencySelector,\n\tcurrencySelectorTriggerVariants,\n\ttype CurrencyFlagStripe,\n\ttype CurrencySelectorOption,\n\ttype CurrencySelectorProps,\n\ttype CurrencySelectorSize,\n};\n"],"mappings":"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","names":[]}

package/dist/date-picker.d.ts

@@ -1,22 +1,30 @@
 import * as React from 'react';
-import { DateRange } from 'react-day-picker';
+import { Matcher, DateRange } from 'react-day-picker';
 export { DateRange } from 'react-day-picker';
 
-interface DatePickerProps {
-    value?: Date;
-    onChange?: (date: Date | undefined) => void;
+type CaptionLayout = "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+interface DatePickerBaseProps {
     disabled?: boolean;
     placeholder?: string;
     className?: string;
+    /** Caption style. Defaults to month + year dropdowns for quick navigation. */
+    captionLayout?: CaptionLayout;
+    /** Earliest navigable month. Defaults to 100 years before today. */
+    startMonth?: Date;
+    /** Latest navigable month. Defaults to 10 years after today. */
+    endMonth?: Date;
+    /** Dates that cannot be selected (react-day-picker matcher). */
+    disabledDates?: Matcher | Matcher[];
+}
+interface DatePickerProps extends DatePickerBaseProps {
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
 }
-declare function DatePicker({ value, onChange, disabled, placeholder, className, }: DatePickerProps): React.JSX.Element;
-interface DateRangePickerProps {
+declare function DatePicker({ value, onChange, disabled, placeholder, className, captionLayout, startMonth, endMonth, disabledDates, }: DatePickerProps): React.JSX.Element;
+interface DateRangePickerProps extends DatePickerBaseProps {
     value?: DateRange;
     onChange?: (range: DateRange | undefined) => void;
-    disabled?: boolean;
-    placeholder?: string;
-    className?: string;
 }
-declare function DateRangePicker({ value, onChange, disabled, placeholder, className, }: DateRangePickerProps): React.JSX.Element;
+declare function DateRangePicker({ value, onChange, disabled, placeholder, className, captionLayout, startMonth, endMonth, disabledDates, }: DateRangePickerProps): React.JSX.Element;
 
 export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps };