@hivcd-printshop/design-system 1.4.2 → 1.5.1
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/index.d.mts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +51 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +50 -10
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -621,4 +621,12 @@ interface ToastProps {
|
|
|
621
621
|
}
|
|
622
622
|
declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
|
|
623
623
|
|
|
624
|
-
|
|
624
|
+
interface HeaderBarProps {
|
|
625
|
+
className?: string;
|
|
626
|
+
children?: React.ReactNode;
|
|
627
|
+
onClick?: () => void;
|
|
628
|
+
active?: boolean;
|
|
629
|
+
}
|
|
630
|
+
declare const HeaderBar: ({ className, children, onClick, active, ...props }: HeaderBarProps) => react.JSX.Element;
|
|
631
|
+
|
|
632
|
+
export { Accordion, type AccordionProps, BackButton, type BackButtonProps, Badge, type BadgeProps, type BadgeVariant, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, HeaderBar, type HeaderBarProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, TabSwitch, type TabSwitchItem, type TabSwitchProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
|
package/dist/index.d.ts
CHANGED
|
@@ -621,4 +621,12 @@ interface ToastProps {
|
|
|
621
621
|
}
|
|
622
622
|
declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
|
|
623
623
|
|
|
624
|
-
|
|
624
|
+
interface HeaderBarProps {
|
|
625
|
+
className?: string;
|
|
626
|
+
children?: React.ReactNode;
|
|
627
|
+
onClick?: () => void;
|
|
628
|
+
active?: boolean;
|
|
629
|
+
}
|
|
630
|
+
declare const HeaderBar: ({ className, children, onClick, active, ...props }: HeaderBarProps) => react.JSX.Element;
|
|
631
|
+
|
|
632
|
+
export { Accordion, type AccordionProps, BackButton, type BackButtonProps, Badge, type BadgeProps, type BadgeVariant, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, HeaderBar, type HeaderBarProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, TabSwitch, type TabSwitchItem, type TabSwitchProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
|
package/dist/index.js
CHANGED
|
@@ -46,6 +46,7 @@ __export(index_exports, {
|
|
|
46
46
|
FormTel: () => FormTel,
|
|
47
47
|
FormText: () => FormText,
|
|
48
48
|
FormTextArea: () => FormTextArea,
|
|
49
|
+
HeaderBar: () => HeaderBar,
|
|
49
50
|
IconCheck: () => IconCheck,
|
|
50
51
|
IconChevronDownXS: () => IconChevronDownXS,
|
|
51
52
|
IconClose: () => IconClose,
|
|
@@ -1164,7 +1165,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
|
|
|
1164
1165
|
className: cn(
|
|
1165
1166
|
"relative w-110 pt-8 h-fit pointer-events-auto",
|
|
1166
1167
|
"flex flex-col items-center",
|
|
1167
|
-
"border border-gray02",
|
|
1168
|
+
// "border border-gray02",
|
|
1168
1169
|
"bg-white shadow-[0px_0px_30px_0px_rgba(0,0,0,0.08)]",
|
|
1169
1170
|
className
|
|
1170
1171
|
),
|
|
@@ -1380,7 +1381,7 @@ var NoticeBar = ({
|
|
|
1380
1381
|
children: [
|
|
1381
1382
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: "flex items-center gap-3", children: [
|
|
1382
1383
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NoticeBadge, { variable: badgeVariable }),
|
|
1383
|
-
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h1", { className: "text-
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h1", { className: "text-head3-regular text-strong", children: title })
|
|
1384
1385
|
] }),
|
|
1385
1386
|
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
|
|
1386
1387
|
]
|
|
@@ -1398,7 +1399,7 @@ var SearchBar = ({ value, onChange, className }) => {
|
|
|
1398
1399
|
"w-full h-12 pl-4 pr-3",
|
|
1399
1400
|
"flex items-center gap-2",
|
|
1400
1401
|
"box-border border-b border-gray02 border-t border-t-white",
|
|
1401
|
-
"focus-within:border-black focus-within:border focus-within:outline-none",
|
|
1402
|
+
"focus-within:border-black focus-within:border focus-within:outline-none focus-within:pl-[15px]",
|
|
1402
1403
|
className
|
|
1403
1404
|
),
|
|
1404
1405
|
children: [
|
|
@@ -1500,7 +1501,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
|
|
|
1500
1501
|
" | ",
|
|
1501
1502
|
title
|
|
1502
1503
|
] });
|
|
1503
|
-
const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-
|
|
1504
|
+
const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-strong text-left bg-white border-b border-gray02";
|
|
1504
1505
|
if (!collapsible) {
|
|
1505
1506
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn(base, className), children: label });
|
|
1506
1507
|
}
|
|
@@ -1553,7 +1554,7 @@ var RadioToggleItem = ({
|
|
|
1553
1554
|
}
|
|
1554
1555
|
),
|
|
1555
1556
|
open && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
|
|
1556
|
-
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-
|
|
1557
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-body3-book text-secondary", children: content }),
|
|
1557
1558
|
badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Badge2, { label: badge }, badge)) }),
|
|
1558
1559
|
labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1559
1560
|
TextButton2,
|
|
@@ -1578,7 +1579,7 @@ var Radio = ({ selected = false, className }) => {
|
|
|
1578
1579
|
{
|
|
1579
1580
|
className: cn(
|
|
1580
1581
|
"inline-flex size-6 shrink-0 items-center justify-center rounded-full transition-colors",
|
|
1581
|
-
"group-hover:bg-gray00 group-active:bg-gray01",
|
|
1582
|
+
// "group-hover:bg-gray00 group-active:bg-gray01",
|
|
1582
1583
|
className
|
|
1583
1584
|
),
|
|
1584
1585
|
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { className: "size-2.5" })
|
|
@@ -2097,7 +2098,7 @@ var UpperPartTab = ({
|
|
|
2097
2098
|
className
|
|
2098
2099
|
),
|
|
2099
2100
|
children: [
|
|
2100
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-
|
|
2101
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-gray04"), children: label }),
|
|
2101
2102
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
|
|
2102
2103
|
]
|
|
2103
2104
|
}
|
|
@@ -2195,7 +2196,7 @@ var LowerPartItemButton = ({
|
|
|
2195
2196
|
className: cn(
|
|
2196
2197
|
"inline-flex h-full items-center justify-center px-5 text-head3-medium cursor-pointer no-underline",
|
|
2197
2198
|
"transition-colors hover:bg-gray00 active:bg-gray01",
|
|
2198
|
-
selected ? "text-strong" : "text-
|
|
2199
|
+
selected ? "text-strong" : "text-gray04",
|
|
2199
2200
|
className
|
|
2200
2201
|
),
|
|
2201
2202
|
children: label
|
|
@@ -2235,8 +2236,9 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
|
|
|
2235
2236
|
role: "status",
|
|
2236
2237
|
"aria-live": "polite",
|
|
2237
2238
|
className: cn(
|
|
2238
|
-
"w-full h-fit py-2.5 bg-
|
|
2239
|
-
"
|
|
2239
|
+
"w-full h-fit py-2.5 bg-gray08",
|
|
2240
|
+
"mt-7 mx-8",
|
|
2241
|
+
"text-white text-center text-body1-regular",
|
|
2240
2242
|
"shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
|
|
2241
2243
|
controlled && "transition-opacity duration-300",
|
|
2242
2244
|
controlled && (visible ? "opacity-100" : "opacity-0"),
|
|
@@ -2257,6 +2259,44 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
|
|
|
2257
2259
|
}
|
|
2258
2260
|
);
|
|
2259
2261
|
});
|
|
2262
|
+
|
|
2263
|
+
// src/components/HeaderBar/HeaderBar.tsx
|
|
2264
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2265
|
+
var HeaderBar = ({ className, children, onClick, active, ...props }) => {
|
|
2266
|
+
const onClickStyle = onClick ? "cursor-pointer hover:bg-gray00 active:bg-gray01 transition-colors" : "";
|
|
2267
|
+
const a11yProps = onClick ? {
|
|
2268
|
+
role: "button",
|
|
2269
|
+
tabIndex: 0,
|
|
2270
|
+
"aria-expanded": active,
|
|
2271
|
+
onKeyDown: (e) => {
|
|
2272
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
2273
|
+
e.preventDefault();
|
|
2274
|
+
onClick();
|
|
2275
|
+
}
|
|
2276
|
+
}
|
|
2277
|
+
} : {};
|
|
2278
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2279
|
+
"header",
|
|
2280
|
+
{
|
|
2281
|
+
className: cn(
|
|
2282
|
+
"header",
|
|
2283
|
+
"h-12 w-full pl-5 pr-4 py-2.5",
|
|
2284
|
+
"bg-white box-border border-b border-gray02",
|
|
2285
|
+
"text-head3-medium text-strong",
|
|
2286
|
+
"flex items-center justify-between",
|
|
2287
|
+
onClickStyle,
|
|
2288
|
+
className
|
|
2289
|
+
),
|
|
2290
|
+
onClick,
|
|
2291
|
+
...a11yProps,
|
|
2292
|
+
...props,
|
|
2293
|
+
children: [
|
|
2294
|
+
children,
|
|
2295
|
+
onClick && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconChevronDownXS, { className: cn("transition-transform", active && "rotate-180") })
|
|
2296
|
+
]
|
|
2297
|
+
}
|
|
2298
|
+
);
|
|
2299
|
+
};
|
|
2260
2300
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2261
2301
|
0 && (module.exports = {
|
|
2262
2302
|
Accordion,
|
|
@@ -2284,6 +2324,7 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
|
|
|
2284
2324
|
FormTel,
|
|
2285
2325
|
FormText,
|
|
2286
2326
|
FormTextArea,
|
|
2327
|
+
HeaderBar,
|
|
2287
2328
|
IconCheck,
|
|
2288
2329
|
IconChevronDownXS,
|
|
2289
2330
|
IconClose,
|