periplo-ui 3.61.0 → 3.62.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Combobox/StaticComboboxList.js +5 -5
- package/dist/components/Combobox/StaticComboboxList.js.map +1 -1
- package/dist/components/InputDate/InputDate.js +2 -1
- package/dist/components/InputDate/InputDate.js.map +1 -1
- package/dist/components/StarRating/StarRating.d.ts +12 -0
- package/dist/components/StarRating/StarRating.js +58 -0
- package/dist/components/StarRating/StarRating.js.map +1 -0
- package/dist/components/StarRating/index.d.ts +1 -0
- package/dist/components/StarRating/index.js +2 -0
- package/dist/components/StarRating/index.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -43,13 +43,13 @@ const StaticComboboxList = ({
|
|
|
43
43
|
return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)));
|
|
44
44
|
}, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue]);
|
|
45
45
|
const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : void 0;
|
|
46
|
-
const
|
|
46
|
+
const renderListOption = (option) => {
|
|
47
47
|
const optionValue = getOptionValue(option);
|
|
48
48
|
const selected = isOptionSelected(optionValue);
|
|
49
49
|
return /* @__PURE__ */ jsx(CommandItem, { value: optionValue, onSelect: handleSelect, children: renderOption ? renderOption(option, selected) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
50
50
|
selected ? /* @__PURE__ */ jsx(CheckSquare, { className: "mr-2 !h-6 !w-6" }) : /* @__PURE__ */ jsx(Square, { className: "mr-2 !h-6 !w-6" }),
|
|
51
51
|
/* @__PURE__ */ jsx(ComboboxOptionWithTooltip, { label: getOptionLabel(option) })
|
|
52
|
-
] }) });
|
|
52
|
+
] }) }, optionValue);
|
|
53
53
|
};
|
|
54
54
|
return /* @__PURE__ */ jsx(
|
|
55
55
|
CommandList,
|
|
@@ -60,11 +60,11 @@ const StaticComboboxList = ({
|
|
|
60
60
|
children: loading ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex items-center justify-center py-6 text-sm", children: loadingPlaceholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
61
61
|
filteredOptions.length === 0 && regularOptions.length === 0 && (!specialOptions || specialOptions.length === 0) && /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
|
|
62
62
|
specialOptions?.length && specialOptionsTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
|
-
/* @__PURE__ */ jsx(CommandGroup, { heading: specialOptionsTitle, children: specialOptions.map(
|
|
63
|
+
/* @__PURE__ */ jsx(CommandGroup, { heading: specialOptionsTitle, children: specialOptions.map(renderListOption) }),
|
|
64
64
|
/* @__PURE__ */ jsx(CommandSeparator, { className: "!mx-[10px]" })
|
|
65
65
|
] }) : null,
|
|
66
|
-
!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { heading: selectedMultiplePlaceholder, children: regularSelectedOptions.map(
|
|
67
|
-
/* @__PURE__ */ jsx(CommandGroup, { heading: groupHeading, children: optionsToShow.map(
|
|
66
|
+
!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { heading: selectedMultiplePlaceholder, children: regularSelectedOptions.map(renderListOption) }),
|
|
67
|
+
/* @__PURE__ */ jsx(CommandGroup, { heading: groupHeading, children: optionsToShow.map(renderListOption) })
|
|
68
68
|
] })
|
|
69
69
|
}
|
|
70
70
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StaticComboboxList.js","sources":["../../../src/components/Combobox/StaticComboboxList.tsx"],"sourcesContent":["import { CheckSquare } from '@phosphor-icons/react/dist/ssr/CheckSquare'\nimport { Square } from '@phosphor-icons/react/dist/ssr/Square'\nimport { useMemo } from 'react'\n\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { StaticComboboxListProps } from './types'\n\nexport const StaticComboboxList = <T extends object>({\n filteredOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n multiple,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n selectedMultiplePlaceholder,\n multipleOptionsPlaceholder,\n options,\n specialOptions,\n specialOptionsTitle,\n}: StaticComboboxListProps<T>) => {\n const isArrayValue = Array.isArray(value)\n const selectedValues = useMemo(() => (multiple && isArrayValue ? value : []), [multiple, isArrayValue, value])\n\n const isOptionSelected = (optionValue: string) =>\n multiple ? selectedValues.includes(optionValue) : value === optionValue\n\n const regularOptions = useMemo(() => {\n return filteredOptions.filter(\n (option) => !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [filteredOptions, specialOptions, getOptionValue])\n\n const regularSelectedOptions = useMemo(() => {\n if (!multiple || !isArrayValue) return []\n\n return options.filter(\n (option) =>\n selectedValues.includes(getOptionValue(option)) &&\n !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [options, selectedValues, specialOptions, getOptionValue, multiple, isArrayValue])\n\n const optionsToShow = useMemo(() => {\n if (specialOptions) return regularOptions\n\n if (!multiple || !isArrayValue) return regularOptions\n\n return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)))\n }, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue])\n\n const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : undefined\n\n const
|
|
1
|
+
{"version":3,"file":"StaticComboboxList.js","sources":["../../../src/components/Combobox/StaticComboboxList.tsx"],"sourcesContent":["import { CheckSquare } from '@phosphor-icons/react/dist/ssr/CheckSquare'\nimport { Square } from '@phosphor-icons/react/dist/ssr/Square'\nimport { useMemo } from 'react'\n\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator } from '../Command'\n\nimport { ComboboxOptionWithTooltip } from './ComboboxOptionWithTooltip'\nimport type { StaticComboboxListProps } from './types'\n\nexport const StaticComboboxList = <T extends object>({\n filteredOptions,\n loading,\n loadingPlaceholder,\n emptyMessage,\n multiple,\n value,\n getOptionValue,\n getOptionLabel,\n handleSelect,\n renderOption,\n maxHeight,\n selectedMultiplePlaceholder,\n multipleOptionsPlaceholder,\n options,\n specialOptions,\n specialOptionsTitle,\n}: StaticComboboxListProps<T>) => {\n const isArrayValue = Array.isArray(value)\n const selectedValues = useMemo(() => (multiple && isArrayValue ? value : []), [multiple, isArrayValue, value])\n\n const isOptionSelected = (optionValue: string) =>\n multiple ? selectedValues.includes(optionValue) : value === optionValue\n\n const regularOptions = useMemo(() => {\n return filteredOptions.filter(\n (option) => !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [filteredOptions, specialOptions, getOptionValue])\n\n const regularSelectedOptions = useMemo(() => {\n if (!multiple || !isArrayValue) return []\n\n return options.filter(\n (option) =>\n selectedValues.includes(getOptionValue(option)) &&\n !specialOptions?.some((special) => getOptionValue(special) === getOptionValue(option)),\n )\n }, [options, selectedValues, specialOptions, getOptionValue, multiple, isArrayValue])\n\n const optionsToShow = useMemo(() => {\n if (specialOptions) return regularOptions\n\n if (!multiple || !isArrayValue) return regularOptions\n\n return regularOptions.filter((option) => !selectedValues.includes(getOptionValue(option)))\n }, [regularOptions, specialOptions, selectedValues, getOptionValue, multiple, isArrayValue])\n\n const groupHeading = !specialOptions && multiple ? multipleOptionsPlaceholder : undefined\n\n const renderListOption = (option: T) => {\n const optionValue = getOptionValue(option)\n const selected = isOptionSelected(optionValue)\n\n return (\n <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n {renderOption ? (\n renderOption(option, selected)\n ) : (\n <>\n {selected ? <CheckSquare className=\"mr-2 !h-6 !w-6\" /> : <Square className=\"mr-2 !h-6 !w-6\" />}\n <ComboboxOptionWithTooltip label={getOptionLabel(option)} />\n </>\n )}\n </CommandItem>\n )\n }\n\n return (\n <CommandList\n style={{ maxHeight }}\n className=\"overflow-auto overscroll-contain\"\n onWheel={(event) => event.stopPropagation()}\n >\n {loading ? (\n <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">{loadingPlaceholder}</div>\n ) : (\n <>\n {filteredOptions.length === 0 &&\n regularOptions.length === 0 &&\n (!specialOptions || specialOptions.length === 0) && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n\n {specialOptions?.length && specialOptionsTitle ? (\n <>\n <CommandGroup heading={specialOptionsTitle}>{specialOptions.map(renderListOption)}</CommandGroup>\n\n <CommandSeparator className=\"!mx-[10px]\" />\n </>\n ) : null}\n\n {!specialOptions && multiple && isArrayValue && regularSelectedOptions.length > 0 && (\n <CommandGroup heading={selectedMultiplePlaceholder}>\n {regularSelectedOptions.map(renderListOption)}\n </CommandGroup>\n )}\n\n <CommandGroup heading={groupHeading}>{optionsToShow.map(renderListOption)}</CommandGroup>\n </>\n )}\n </CommandList>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -32,8 +32,9 @@ const InputDate = React.forwardRef(
|
|
|
32
32
|
};
|
|
33
33
|
const handleMaskedChange = (newValue) => {
|
|
34
34
|
setInternalValue(newValue);
|
|
35
|
+
const externalValue = newValue.replaceAll("/", "-");
|
|
35
36
|
controlledOnChange?.({
|
|
36
|
-
target: { value:
|
|
37
|
+
target: { value: externalValue }
|
|
37
38
|
});
|
|
38
39
|
};
|
|
39
40
|
const handleClear = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDate.js","sources":["../../../src/components/InputDate/InputDate.tsx"],"sourcesContent":["import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr/WarningCircle'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport * as React from 'react'\n\nimport { type DateInputFormat } from './manualDateFormat'\nimport { MaskedInput } from './MaskedInput'\n\nimport { cn } from '@/lib/utils'\n\nexport type InputDateProps = {\n className?: string\n endContent?: React.ReactElement\n disabled?: boolean\n error?: boolean | string\n errorMessage?: string\n inputClassName?: string\n inputFormat?: DateInputFormat\n onClear?: boolean | (() => void)\n value?: string\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'>\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n (\n {\n className,\n endContent,\n disabled,\n error,\n errorMessage,\n value: controlledValue,\n onChange: controlledOnChange,\n inputClassName,\n onClear = true,\n inputFormat,\n 'aria-invalid': ariaInvalid,\n ...props\n },\n ref,\n ) => {\n const [internalValue, setInternalValue] = React.useState(controlledValue ?? '')\n const [isHovered, setIsHovered] = React.useState(false)\n\n React.useEffect(() => {\n setInternalValue(controlledValue ?? '')\n }, [controlledValue])\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setInternalValue(event.target.value)\n controlledOnChange?.(event)\n }\n\n const handleMaskedChange = (newValue: string) => {\n setInternalValue(newValue)\n controlledOnChange?.({\n target: { value:
|
|
1
|
+
{"version":3,"file":"InputDate.js","sources":["../../../src/components/InputDate/InputDate.tsx"],"sourcesContent":["import { CalendarBlank } from '@phosphor-icons/react/dist/ssr/CalendarBlank'\nimport { WarningCircle } from '@phosphor-icons/react/dist/ssr/WarningCircle'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport * as React from 'react'\n\nimport { type DateInputFormat } from './manualDateFormat'\nimport { MaskedInput } from './MaskedInput'\n\nimport { cn } from '@/lib/utils'\n\nexport type InputDateProps = {\n className?: string\n endContent?: React.ReactElement\n disabled?: boolean\n error?: boolean | string\n errorMessage?: string\n inputClassName?: string\n inputFormat?: DateInputFormat\n onClear?: boolean | (() => void)\n value?: string\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'>\n\nconst InputDate = React.forwardRef<HTMLInputElement, InputDateProps>(\n (\n {\n className,\n endContent,\n disabled,\n error,\n errorMessage,\n value: controlledValue,\n onChange: controlledOnChange,\n inputClassName,\n onClear = true,\n inputFormat,\n 'aria-invalid': ariaInvalid,\n ...props\n },\n ref,\n ) => {\n const [internalValue, setInternalValue] = React.useState(controlledValue ?? '')\n const [isHovered, setIsHovered] = React.useState(false)\n\n React.useEffect(() => {\n setInternalValue(controlledValue ?? '')\n }, [controlledValue])\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setInternalValue(event.target.value)\n controlledOnChange?.(event)\n }\n\n const handleMaskedChange = (newValue: string) => {\n setInternalValue(newValue)\n const externalValue = newValue.replaceAll('/', '-')\n controlledOnChange?.({\n target: { value: externalValue },\n } as React.ChangeEvent<HTMLInputElement>)\n }\n\n const handleClear = () => {\n handleChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>)\n if (typeof onClear === 'function') onClear()\n }\n\n const hasValue = Boolean(internalValue && internalValue.trim() !== '')\n const showClearIcon = Boolean(onClear && hasValue && isHovered && !disabled)\n const resolvedErrorMessage = typeof error === 'string' ? error : errorMessage\n const hasError = Boolean(error ?? resolvedErrorMessage)\n\n const renderCalendarIcon = () => <CalendarBlank size={20} />\n\n const renderErrorIcon = () => {\n if (!hasError) return null\n return (\n <div>\n <WarningCircle\n data-testid=\"exclaim-icon\"\n className={cn(\n 'text-error-500 transition-opacity duration-150',\n showClearIcon ? 'opacity-0' : 'opacity-100',\n )}\n size={18}\n />\n </div>\n )\n }\n\n const renderClearIcon = () => {\n if (disabled || !onClear) return null\n return (\n <div\n className={cn(\n 'absolute right-3 z-10 flex h-full w-10 items-center justify-end rounded-r-lg',\n endContent || error\n ? 'bg-transparent'\n : 'bg-gradient-to-l from-white from-60% via-white/80 via-80% to-transparent transition-opacity duration-150',\n showClearIcon ? 'opacity-100' : 'opacity-0',\n )}\n >\n <X\n data-testid=\"clear-button\"\n className={cn(\n 'h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n showClearIcon ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n )}\n onClick={handleClear}\n />\n </div>\n )\n }\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <div className=\"flex w-full items-center\">\n <label\n data-testid=\"input-date-mask-control\"\n className={cn(\n 'relative flex h-12 w-full items-center rounded-lg border border-neutral-200 bg-white px-3 transition-colors focus-within:border-neutral-950',\n disabled && 'bg-neutral-50',\n hasError && 'border-error-400 focus-within:border-error-700',\n className,\n )}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {renderCalendarIcon()}\n <MaskedInput\n ref={ref}\n inputFormat={inputFormat}\n placeholder={inputFormat}\n aria-invalid={ariaInvalid ?? hasError}\n disabled={disabled}\n value={internalValue}\n onChange={handleMaskedChange}\n className={cn(\n 'w-full bg-transparent px-2 outline-0 transition-colors placeholder:text-neutral-300 disabled:cursor-not-allowed disabled:opacity-50',\n inputClassName,\n )}\n {...props}\n />\n {renderErrorIcon()}\n {renderClearIcon()}\n </label>\n </div>\n {resolvedErrorMessage && <span className=\"text-error-500 text-sm\">{resolvedErrorMessage}</span>}\n </div>\n )\n },\n)\n\nInputDate.displayName = 'InputDate'\n\nexport { InputDate }\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type StarRatingProps = {
|
|
3
|
+
value: number;
|
|
4
|
+
max?: number;
|
|
5
|
+
size?: 'sm' | 'md' | 'lg';
|
|
6
|
+
allowPartial?: boolean;
|
|
7
|
+
color?: string;
|
|
8
|
+
emptyColor?: string;
|
|
9
|
+
emptyBgColor?: string;
|
|
10
|
+
containerClassName?: string;
|
|
11
|
+
} & Omit<React.ComponentProps<'div'>, 'children'>;
|
|
12
|
+
export declare function StarRating({ value, max, size, allowPartial, color, emptyColor, emptyBgColor, className, containerClassName, ...props }: StarRatingProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Star } from '@phosphor-icons/react/dist/ssr/Star';
|
|
3
|
+
import { cn } from '../../lib/utils.js';
|
|
4
|
+
|
|
5
|
+
function StarRating({
|
|
6
|
+
value,
|
|
7
|
+
max = 5,
|
|
8
|
+
size = "lg",
|
|
9
|
+
allowPartial = true,
|
|
10
|
+
color = "#FBBA00",
|
|
11
|
+
emptyColor = "#696963",
|
|
12
|
+
emptyBgColor = "#696963",
|
|
13
|
+
className,
|
|
14
|
+
containerClassName,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
const safeMax = Math.max(1, Math.floor(max));
|
|
18
|
+
const clampedValue = Math.max(0, Math.min(value, safeMax));
|
|
19
|
+
return /* @__PURE__ */ jsx(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
"data-size": size,
|
|
23
|
+
"data-slot": "star-rating",
|
|
24
|
+
className: cn(
|
|
25
|
+
"flex flex-col items-center gap-1.5",
|
|
26
|
+
"data-[size=lg]:[--star-size:calc(var(--spacing)*5)] data-[size=md]:[--star-size:calc(var(--spacing)*4)] data-[size=sm]:[--star-size:calc(var(--spacing)*3)]",
|
|
27
|
+
containerClassName
|
|
28
|
+
),
|
|
29
|
+
"aria-label": `${clampedValue} out of ${safeMax} stars`,
|
|
30
|
+
role: "img",
|
|
31
|
+
...props,
|
|
32
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-0.5", className), children: Array.from({ length: safeMax }).map((_unused, index) => {
|
|
33
|
+
const starIndex = index + 1;
|
|
34
|
+
let filledRatio;
|
|
35
|
+
if (allowPartial) {
|
|
36
|
+
filledRatio = Math.max(0, Math.min(1, clampedValue - index));
|
|
37
|
+
} else {
|
|
38
|
+
filledRatio = clampedValue >= starIndex ? 1 : 0;
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", style: { color: emptyColor }, "aria-hidden": "true", children: [
|
|
41
|
+
emptyBgColor ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0", style: { color: emptyBgColor }, children: /* @__PURE__ */ jsx(Star, { weight: "fill", className: "size-[var(--star-size)]" }) }) : null,
|
|
42
|
+
/* @__PURE__ */ jsx(Star, { className: "size-[var(--star-size)]" }),
|
|
43
|
+
filledRatio > 0 ? /* @__PURE__ */ jsx(
|
|
44
|
+
"span",
|
|
45
|
+
{
|
|
46
|
+
className: "absolute inset-0 overflow-hidden",
|
|
47
|
+
style: { width: `${filledRatio * 100}%`, color },
|
|
48
|
+
children: /* @__PURE__ */ jsx(Star, { weight: "fill", className: "size-[var(--star-size)]" })
|
|
49
|
+
}
|
|
50
|
+
) : null
|
|
51
|
+
] }, index);
|
|
52
|
+
}) })
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export { StarRating };
|
|
58
|
+
//# sourceMappingURL=StarRating.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarRating.js","sources":["../../../src/components/StarRating/StarRating.tsx"],"sourcesContent":["import { Star } from '@phosphor-icons/react/dist/ssr/Star'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\nexport type StarRatingProps = {\n value: number\n max?: number\n size?: 'sm' | 'md' | 'lg'\n allowPartial?: boolean\n color?: string\n emptyColor?: string\n emptyBgColor?: string\n containerClassName?: string\n} & Omit<React.ComponentProps<'div'>, 'children'>\n\nexport function StarRating({\n value,\n max = 5,\n size = 'lg',\n allowPartial = true,\n color = '#FBBA00',\n emptyColor = '#696963',\n emptyBgColor = '#696963',\n className,\n containerClassName,\n ...props\n}: StarRatingProps) {\n const safeMax = Math.max(1, Math.floor(max))\n const clampedValue = Math.max(0, Math.min(value, safeMax))\n\n return (\n <div\n data-size={size}\n data-slot=\"star-rating\"\n className={cn(\n 'flex flex-col items-center gap-1.5',\n 'data-[size=lg]:[--star-size:calc(var(--spacing)*5)] data-[size=md]:[--star-size:calc(var(--spacing)*4)] data-[size=sm]:[--star-size:calc(var(--spacing)*3)]',\n containerClassName,\n )}\n aria-label={`${clampedValue} out of ${safeMax} stars`}\n role=\"img\"\n {...props}\n >\n <div className={cn('flex items-center gap-0.5', className)}>\n {Array.from({ length: safeMax }).map((_unused, index) => {\n const starIndex = index + 1\n let filledRatio: number\n if (allowPartial) {\n filledRatio = Math.max(0, Math.min(1, clampedValue - index))\n } else {\n filledRatio = clampedValue >= starIndex ? 1 : 0\n }\n\n return (\n <span key={index} className=\"relative inline-flex\" style={{ color: emptyColor }} aria-hidden=\"true\">\n {emptyBgColor ? (\n <span className=\"absolute inset-0\" style={{ color: emptyBgColor }}>\n <Star weight=\"fill\" className=\"size-[var(--star-size)]\" />\n </span>\n ) : null}\n <Star className=\"size-[var(--star-size)]\" />\n {filledRatio > 0 ? (\n <span\n className=\"absolute inset-0 overflow-hidden\"\n style={{ width: `${filledRatio * 100}%`, color: color }}\n >\n <Star weight=\"fill\" className=\"size-[var(--star-size)]\" />\n </span>\n ) : null}\n </span>\n )\n })}\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,IAAA,GAAO,IAAA;AAAA,EACP,YAAA,GAAe,IAAA;AAAA,EACf,KAAA,GAAQ,SAAA;AAAA,EACR,UAAA,GAAa,SAAA;AAAA,EACb,YAAA,GAAe,SAAA;AAAA,EACf,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,UAAU,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,GAAG,CAAC,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAe,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,GAAA,CAAI,KAAA,EAAO,OAAO,CAAC,CAAA;AAEzD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,6JAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,YAAA,EAAY,CAAA,EAAG,YAAY,CAAA,QAAA,EAAW,OAAO,CAAA,MAAA,CAAA;AAAA,MAC7C,IAAA,EAAK,KAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,SAAS,CAAA,EACtD,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,QAAQ,OAAA,EAAS,EAAE,GAAA,CAAI,CAAC,SAAS,KAAA,KAAU;AACvD,QAAA,MAAM,YAAY,KAAA,GAAQ,CAAA;AAC1B,QAAA,IAAI,WAAA;AACJ,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,WAAA,GAAc,IAAA,CAAK,IAAI,CAAA,EAAG,IAAA,CAAK,IAAI,CAAA,EAAG,YAAA,GAAe,KAAK,CAAC,CAAA;AAAA,SAC7D,MAAO;AACL,UAAA,WAAA,GAAc,YAAA,IAAgB,YAAY,CAAA,GAAI,CAAA;AAAA;AAGhD,QAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAiB,SAAA,EAAU,sBAAA,EAAuB,KAAA,EAAO,EAAE,KAAA,EAAO,UAAA,EAAW,EAAG,aAAA,EAAY,MAAA,EAC1F,QAAA,EAAA;AAAA,UAAA,YAAA,uBACE,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAmB,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa,EAC9D,QAAA,kBAAA,GAAA,CAAC,QAAK,MAAA,EAAO,MAAA,EAAO,SAAA,EAAU,yBAAA,EAA0B,GAC1D,CAAA,GACE,IAAA;AAAA,0BACJ,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,yBAAA,EAA0B,CAAA;AAAA,UACzC,cAAc,CAAA,mBACb,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,kCAAA;AAAA,cACV,OAAO,EAAE,KAAA,EAAO,GAAG,WAAA,GAAc,GAAG,KAAK,KAAA,EAAa;AAAA,cAEtD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAA,EAAO,MAAA,EAAO,WAAU,yBAAA,EAA0B;AAAA;AAAA,WAC1D,GACE;AAAA,SAAA,EAAA,EAdK,KAeX,CAAA;AAAA,OAEH,CAAA,EACH;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './StarRating';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export * from './components/Separator';
|
|
|
31
31
|
export * from './components/Sheet';
|
|
32
32
|
export * from './components/Sidebar';
|
|
33
33
|
export * from './components/Skeleton';
|
|
34
|
+
export * from './components/StarRating';
|
|
34
35
|
export * from './components/Table';
|
|
35
36
|
export * from './components/Tabs';
|
|
36
37
|
export * from './components/Textarea';
|
package/dist/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export { Separator } from './components/Separator/Separator.js';
|
|
|
35
35
|
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetRoot, SheetTitle, SheetTrigger } from './components/Sheet/Sheet.js';
|
|
36
36
|
export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarRoot, SidebarSeparator, SidebarTrigger, useSidebar } from './components/Sidebar/Sidebar.js';
|
|
37
37
|
export { Skeleton } from './components/Skeleton/Skeleton.js';
|
|
38
|
+
export { StarRating } from './components/StarRating/StarRating.js';
|
|
38
39
|
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/Table/Table.js';
|
|
39
40
|
export { Tabs, TabsContent, TabsLink, TabsList, TabsTrigger } from './components/Tabs/Tabs.js';
|
|
40
41
|
export { Textarea } from './components/Textarea/Textarea.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|