hlmnhkl-ui 0.20.2 → 0.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.20.2",
+  "version": "0.21.1",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/scripts/pro-components.json

@@ -3,12 +3,15 @@
   "AudioPlayer",
   "BottomTabBar",
   "Calendar",
+  "CalendarHeatmap",
   "Carousel",
   "Chart",
   "ChatThread",
+  "ColorPicker",
   "Combobox",
   "CommandPalette",
   "CommentThread",
+  "CompareSlider",
   "ContextMenu",
   "Countdown",
   "CurrencyInput",
@@ -16,14 +19,17 @@
   "DateRangePicker",
   "DescriptionList",
   "Drawer",
+  "EmojiPicker",
   "FileUpload",
   "HoverCard",
   "IcInput",
   "Image",
+  "ImageCropper",
   "InlineEdit",
   "KanbanBoard",
   "Lightbox",
   "Marquee",
+  "MasonryGrid",
   "MentionInput",
   "Menubar",
   "MultiSelect",
@@ -33,6 +39,7 @@
   "PhoneInput",
   "PinInput",
   "ProgressRing",
+  "PullToRefresh",
   "QrCode",
   "RangeSlider",
   "Rating",
@@ -42,9 +49,12 @@
   "RichTextEditor",
   "Route",
   "Sidebar",
+  "SignaturePad",
+  "SortableList",
   "Sparkline",
   "Stat",
   "Stepper",
+  "SwipeActions",
   "TagInput",
   "TimePicker",
   "Timeline",
@@ -52,5 +62,7 @@
   "Toolbar",
   "Tour",
   "TreeView",
-  "VideoPlayer"
+  "VideoPlayer",
+  "VirtualList",
+  "WeekSchedule"
 ]

package/src/internal/icons.tsx

@@ -100,6 +100,7 @@ export const TrashIcon = (p: IconProps) => (
   </Svg>
 )
 export const EditIcon = (p: IconProps) => <Svg {...p}><path d="M4 20h4L19 9l-4-4L4 16v4z" /></Svg>
+export const UndoIcon = (p: IconProps) => <Svg {...p}><path d="M9 14L4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11" /></Svg>
 export const ShareIcon = (p: IconProps) => (
   <Svg {...p}>
     <path d="M12 15V4M8 8l4-4 4 4" />
@@ -175,3 +176,8 @@ export const RetryIcon = (p: IconProps) => (
     <path d="M19.5 4.5v4h-4" />
   </Svg>
 )
+export const GripIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <path d="M5 9h14M5 15h14" />
+  </Svg>
+)

package/src/tokens.css

@@ -320,6 +320,20 @@
   /* How far each row tilts per row away from the middle, so a wheel reads as a drum. */
   --hl-wheel-tilt: 18deg;
   --hl-wheel-w: 64px;
+  /* CalendarHeatmap: one day's square, the gap, the weekday column, and four shades as a share of the text colour */
+  --hl-heatmap-cell: 12px;
+  --hl-heatmap-gap: 3px;
+  --hl-heatmap-label: 32px;
+  --hl-heatmap-1: 22%;
+  --hl-heatmap-2: 45%;
+  --hl-heatmap-3: 70%;
+  --hl-heatmap-4: 100%;
+  /* WeekSchedule: one hour's height, the time column, and the width below which it shows one day at a time */
+  --hl-schedule-hour: 56px;
+  --hl-schedule-gutter: 56px;
+  --hl-schedule-min-w: 520px;
+  /* How far a later, overlapping event steps in, so the one under it keeps its title in view */
+  --hl-schedule-indent: 16px;
 
   /* Smarter inputs */
   --hl-pin-w: 44px;
@@ -329,6 +343,15 @@
   --hl-number-w: 168px;
   --hl-motion-repeat-delay: 400ms;
   --hl-motion-repeat: 70ms;
+  /* Colour picker. White and black are colour maths, so they stay pure in both themes. */
+  --hl-picker-area-h: 168px;
+  --hl-picker-hue-h: 12px;
+  --hl-swatch: 28px;
+  --hl-picker-white: #ffffff;
+  --hl-picker-black: #000000;
+  /* Signature pad: its height, and the ink's base width (a pen's pressure makes it thinner or bolder) */
+  --hl-signature-h: 180px;
+  --hl-ink-w: 2.5px;
 
   /* Media */
   --hl-blur: 16px;
@@ -498,4 +521,8 @@
   /* Countdown: min width of one number column */
   --hl-countdown-cell: 72px;
   --hl-countdown-cell-sm: 52px;
+
+  /* Touch lists: one swipe action's width, and how far a pull must go before it refreshes */
+  --hl-swipe-action-w: 80px;
+  --hl-pull-distance: 72px;
 }