minka-ds 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [

package/src/components/ui/date-time-picker.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { Calendar } from "./calendar"
+import { Input } from "./input"
+import { cn } from "../../lib/utils"
+
+export interface DateTimeValue {
+  date: Date | null
+  time: string
+}
+
+interface DateTimePickerProps {
+  value?: DateTimeValue | null
+  onChange: (value: DateTimeValue | null) => void
+  className?: string
+}
+
+export function DateTimePicker({
+  value,
+  onChange,
+  className,
+}: DateTimePickerProps) {
+  function handleDaySelect(selected: Date | undefined) {
+    if (!selected) { onChange(null); return }
+    onChange({ date: selected, time: value?.time ?? "" })
+  }
+
+  function handleTime(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!value?.date) return
+    onChange({ ...value, time: e.target.value })
+  }
+
+  return (
+    <div className={cn(
+      "[border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] overflow-hidden w-fit",
+      className
+    )}>
+      <Calendar
+        mode="single"
+        captionLayout="label"
+        selected={value?.date ?? undefined}
+        onSelect={handleDaySelect}
+      />
+      <div className="border-t border-[var(--color-border-default)] px-4 py-3">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-body-sm">Time</label>
+          <Input
+            type="time"
+            value={value?.time ?? ""}
+            onChange={handleTime}
+            disabled={!value?.date}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/filter-combobox.tsx

@@ -41,6 +41,7 @@ function FilterCombobox({
   activeFilters = {},
   trigger,
   dropdownAlign = "left",
+  singleSelect = false,
   className,
 }: {
   categories: FilterCategory[]
@@ -48,6 +49,7 @@ function FilterCombobox({
   activeFilters?: Record<string, CategoryValue[]>
   trigger?: (props: { open: boolean; onClick: () => void }) => React.ReactNode
   dropdownAlign?: "left" | "right"
+  singleSelect?: boolean
   className?: string
 }) {
   const [open, setOpen]                         = React.useState(false)
@@ -273,8 +275,12 @@ function FilterCombobox({
                   ? <EmptyRow />
                   : step2Filtered.map(value => (
                     <li key={value}>
-                      {selectedCategory.type === "hours" ? (
-                        <PickerRow onClick={() => { onApply(selectedCategory.id, [value]); handleClose() }}>
+                      {selectedCategory.type === "hours" || singleSelect ? (
+                        <PickerRow
+                          onClick={() => { onApply(selectedCategory.id, [value]); handleClose() }}
+                          selected={singleSelect && selectedValues.has(value)}
+                          hideChevron={singleSelect}
+                        >
                           {selectedCategory.renderValue?.(value) ?? value}
                         </PickerRow>
                       ) : (
@@ -294,7 +300,7 @@ function FilterCombobox({
                   </li>
                 )}
               </ul>
-              {selectedValues.size > 0 && selectedCategory.type !== "hours" && (
+              {selectedValues.size > 0 && selectedCategory.type !== "hours" && !singleSelect && (
                 <div className="p-1">
                   <Button size="sm" className="w-full" onClick={applyValues}>
                     Apply
@@ -469,7 +475,7 @@ function StepHeader({ title, onBack }: { title: string; onBack: () => void }) {
   )
 }
 
-function PickerRow({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+function PickerRow({ children, onClick, selected = false, hideChevron = false }: { children: React.ReactNode; onClick: () => void; selected?: boolean; hideChevron?: boolean }) {
   return (
     <button
       type="button"
@@ -477,7 +483,8 @@ function PickerRow({ children, onClick }: { children: React.ReactNode; onClick:
       className="relative flex w-full items-center gap-2 [border-radius:var(--radius-tag)] py-1.5 pl-2 pr-8 text-body-sm text-[var(--color-text-default)] hover:bg-[var(--color-action-ghost-hover)] transition-colors"
     >
       {children}
-      <ChevronRightIcon className="pointer-events-none absolute right-2 size-3.5 text-[var(--color-text-muted)]" />
+      {!hideChevron && <ChevronRightIcon className="pointer-events-none absolute right-2 size-3.5 text-[var(--color-text-muted)]" />}
+      {selected && <CheckIcon className="pointer-events-none absolute right-2 size-3.5 text-[var(--color-text-default)]" />}
     </button>
   )
 }

package/src/index.ts

@@ -9,6 +9,7 @@ export * from "./components/ui/alert"
 export * from "./components/ui/badge"
 export * from "./components/ui/breadcrumb"
 export * from "./components/ui/calendar"
+export * from "./components/ui/date-time-picker"
 export * from "./components/ui/date-time-range-picker"
 export * from "./components/ui/cell"
 export * from "./components/ui/button"