@hivcd-printshop/design-system 1.5.0 → 1.5.2

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 CHANGED
@@ -621,4 +621,12 @@ interface ToastProps {
621
621
  }
622
622
  declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
623
623
 
624
- 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, 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 };
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
- 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, 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 };
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,
@@ -2235,11 +2236,10 @@ 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-gray08",
2239
- "mt-7 mx-8",
2239
+ "w-full h-fit py-2.5 px-4 bg-gray08",
2240
2240
  "text-white text-center text-body1-regular",
2241
2241
  "shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
2242
- controlled && "transition-opacity duration-300",
2242
+ controlled && "transition-opacity",
2243
2243
  controlled && (visible ? "opacity-100" : "opacity-0"),
2244
2244
  className
2245
2245
  ),
@@ -2251,13 +2251,51 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
2251
2251
  "div",
2252
2252
  {
2253
2253
  className: cn(
2254
- "fixed inset-x-0 z-5000 pointer-events-none",
2254
+ "fixed inset-x-0 z-5000 pointer-events-none h-full my-7 mx-8",
2255
2255
  position === "top" ? "top-0" : "bottom-0"
2256
2256
  ),
2257
2257
  children: banner
2258
2258
  }
2259
2259
  );
2260
2260
  });
2261
+
2262
+ // src/components/HeaderBar/HeaderBar.tsx
2263
+ var import_jsx_runtime42 = require("react/jsx-runtime");
2264
+ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
2265
+ const onClickStyle = onClick ? "cursor-pointer hover:bg-gray00 active:bg-gray01 transition-colors" : "";
2266
+ const a11yProps = onClick ? {
2267
+ role: "button",
2268
+ tabIndex: 0,
2269
+ "aria-expanded": active,
2270
+ onKeyDown: (e) => {
2271
+ if (e.key === "Enter" || e.key === " ") {
2272
+ e.preventDefault();
2273
+ onClick();
2274
+ }
2275
+ }
2276
+ } : {};
2277
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
2278
+ "header",
2279
+ {
2280
+ className: cn(
2281
+ "header",
2282
+ "h-12 w-full pl-5 pr-4 py-2.5",
2283
+ "bg-white box-border border-b border-gray02",
2284
+ "text-head3-medium text-strong",
2285
+ "flex items-center justify-between",
2286
+ onClickStyle,
2287
+ className
2288
+ ),
2289
+ onClick,
2290
+ ...a11yProps,
2291
+ ...props,
2292
+ children: [
2293
+ children,
2294
+ onClick && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconChevronDownXS, { className: cn("transition-transform", active && "rotate-180") })
2295
+ ]
2296
+ }
2297
+ );
2298
+ };
2261
2299
  // Annotate the CommonJS export names for ESM import in node:
2262
2300
  0 && (module.exports = {
2263
2301
  Accordion,
@@ -2285,6 +2323,7 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
2285
2323
  FormTel,
2286
2324
  FormText,
2287
2325
  FormTextArea,
2326
+ HeaderBar,
2288
2327
  IconCheck,
2289
2328
  IconChevronDownXS,
2290
2329
  IconClose,