@byline/ui 0.9.3 → 0.10.1

package/src/components/inputs/calendar.module.css

@@ -0,0 +1,274 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .day-picker {
+    padding: var(--spacing-12);
+  }
+
+  /* relative flex flex-col gap-4 sm:flex-row */
+  .months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+
+  /* 'relative flex h-7 items-center justify-center', */
+  .months-caption {
+    position: relative;
+    display: flex;
+    height: 1.75rem;
+    /* 28px */
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 'flex items-center justify-center gap-2 w-full',_dropdownsClassName */
+  .dropdowns {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-8);
+    width: 100%;
+  }
+
+  .select-trigger {
+    width: 100%;
+    height: 2.25rem;
+    /* 36px */
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  .select-content {
+    z-index: 100;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  .select-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    border: none;
+    /* 14px */
+  }
+
+  .select-item:hover {
+    background-color: var(--gray-50);
+    color: var(--foreground);
+  }
+
+  .select-chevrons {
+    stroke: var(--primary-400);
+    opacity: 0.7;
+  }
+
+  .scroll-area {
+    border: 1px solid var(--border-color);
+    height: 240px;
+    width: 120px;
+    background-color: var(--background);
+    text-align: center;
+  }
+
+  .disabled {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  /* 'invisible flex-1' */
+  /* This is used to hide the month when the calendar is in single mode */
+  /* and the month is not selected */
+  .hidden {
+    visibility: hidden;
+    flex: 1;
+  }
+
+  /* 'text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', */
+  .outside {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  .outside[aria-selected="true"] {
+    color: var(--muted);
+    opacity: 0.3;
+  }
+
+  /* 'pt-3 text-sm' */
+  .footer {
+    padding-top: var(--spacing-12);
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  .weekdays {
+    display: flex;
+  }
+
+  /* 'w-9 text-sm font-normal text-muted-foreground', */
+  .weekday {
+    width: 2.25rem;
+    /* 36px */
+    font-size: 0.875rem;
+    /* 14px */
+    font-weight: normal;
+    color: var(--muted);
+  }
+
+  /* 'truncate text-sm font-medium' */
+  .caption-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    /* 14px */
+    font-weight: 500;
+  }
+
+  /* 'mx-auto mt-4' */
+  .month-grid {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--spacing-16);
+  }
+
+  /* 'mt-2 flex w-max items-start' */
+  .week {
+    margin-top: var(--spacing-8);
+    display: flex;
+    width: max-content;
+    align-items: flex-start;
+  }
+
+  /* 'flex size-9 flex-1 items-center justify-center p-0 text-sm', */
+  .day {
+    display: flex;
+    width: 2.25rem;
+    /* 36px */
+    height: 2.25rem;
+    /* 36px */
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  /* '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground', */
+  .day > button {
+    color: var(--foreground);
+  }
+
+  /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
+  .today > button {
+    /* background-color: var(--gray-50); */
+    border: solid 1px var(--stroke-primary);
+    color: var(--foreground);
+  }
+
+  .day > button:hover,
+  .day-selected > button {
+    background-color: var(--fill-primary-strong);
+    color: white;
+  }
+
+  /* 'size-9 rounded-md p-0 font-normal transition-none aria-selected:opacity-100', */
+  .day-button {
+    width: 2.25rem;
+    /* 36px */
+    height: 2.25rem;
+    /* 36px */
+    border-radius: var(--border-radius-md);
+    padding: 0;
+    font-weight: normal;
+    transition: none;
+  }
+
+  .day-button[aria-selected="true"] {
+    opacity: 1;
+  }
+
+  /* 'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground' */
+  .button-range {
+    background-color: var(--fill-primary-weak);
+    color: var(--foreground);
+  }
+
+  .button-range > button {
+    background-color: var(--fill-primary-strong);
+    color: white;
+  }
+
+  .button-range > button:hover {
+    background-color: var(--fill-primary-strong);
+    color: var(--foreground);
+  }
+
+  .range-start {
+    border-top-left-radius: var(--border-radius-md);
+    border-bottom-left-radius: var(--border-radius-md);
+  }
+
+  .range-end {
+    border-top-right-radius: var(--border-radius-md);
+    border-bottom-right-radius: var(--border-radius-md);
+  }
+
+  /* 'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground', */
+  .range-middle {
+    background-color: var(--fill-primary-weak);
+    color: var(--foreground);
+  }
+
+  .range-middle > button,
+  .range-middle > button:hover {
+    background-color: transparent;
+    color: var(--foreground);
+  }
+
+  @media (min-width: 40rem) {
+    .months {
+      flex-direction: row;
+    }
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .select-content {
+      background-color: var(--canvas-800);
+      color: var(--foreground);
+    }
+
+    .scroll-area {
+      background-color: var(--canvas-800);
+      color: var(--foreground);
+    }
+
+    .select-item:hover {
+      background-color: var(--primary-400);
+      color: var(--foreground);
+    }
+
+    .select-chevrons {
+      stroke: var(--primary-200);
+      opacity: 0.7;
+    }
+  }
+}

package/src/components/inputs/calendar.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+/**
+ * @file Calendar component using react-day-picker and @base-ui/react
+ * @see https://github.com/Maliksidk19/shadcn-datetime-picker/
+ * Portions copyright (c) 2023 Maliksidk19 licensed under the MIT
+ * license found in the LICENSE file in the root directory of this source tree.
+ * of https://github.com/Maliksidk19/shadcn-datetime-picker/
+ */
+
+import * as React from 'react'
+
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import cx from 'classnames'
+import {
+  DayPicker,
+  type DayPickerProps,
+  type Dropdown as DropDownDayPicker,
+} from 'react-day-picker'
+
+import { ChevronsUpDown } from '../../icons/chevrons-up-down.jsx'
+import { Button } from '../button/button.jsx'
+import { ScrollArea } from '../scroll-area/scroll-area.jsx'
+import styles from './calendar.module.css'
+
+export type CalendarProps = DayPickerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+  captionLabelClassName?: string
+  dayClassName?: string
+  dayButtonClassName?: string
+  dropdownsClassName?: string
+  footerClassName?: string
+  monthClassName?: string
+  monthCaptionClassName?: string
+  monthGridClassName?: string
+  monthsClassName?: string
+  weekClassName?: string
+  weekdayClassName?: string
+  weekdaysClassName?: string
+  rangeEndClassName?: string
+  rangeMiddleClassName?: string
+  rangeStartClassName?: string
+  selectedClassName?: string
+  disabledClassName?: string
+  hiddenClassName?: string
+  outsideClassName?: string
+  todayClassName?: string
+  selectTriggerClassName?: string
+}
+
+export function Calendar({
+  ref,
+  className,
+  classNames,
+  hideNavigation,
+  showOutsideDays = true,
+  components: customComponents,
+  ...props
+}: CalendarProps) {
+  const _monthsClassName = cx(styles.months, props.monthsClassName)
+  const _monthCaptionClassName = cx(styles['months-caption'], props.monthCaptionClassName)
+  const _dropdownsClassName = cx(styles.dropdowns, props.dropdownsClassName)
+  const _footerClassName = cx(styles.footer, props.footerClassName)
+  const _weekdaysClassName = cx(styles.weekdays, props.weekdaysClassName)
+  const _weekdayClassName = cx(styles.weekday, props.weekdayClassName)
+  const _captionLabelClassName = cx(styles['caption-label'], props.captionLabelClassName)
+
+  const _monthGridClassName = cx(styles['month-grid'], props.monthGridClassName)
+  const _weekClassName = cx(styles.week, props.weekClassName)
+  const _dayClassName = cx(styles.day, props.dayClassName)
+  const _dayButtonClassName = cx(styles['day-button'], props.dayButtonClassName)
+
+  const buttonRangeClassName = cx(styles['button-range'])
+  const _rangeStartClassName = cx(
+    buttonRangeClassName,
+    styles['range-start'],
+    props.rangeStartClassName
+  )
+  const _rangeEndClassName = cx(buttonRangeClassName, styles['range-end'], props.rangeEndClassName)
+  const _rangeMiddleClassName = cx(styles['range-middle'], props.rangeMiddleClassName)
+  const _selectedClassName = cx(styles['day-selected'], props.selectedClassName)
+  const _todayClassName = cx(styles.today, props.todayClassName)
+  const _outsideClassName = cx(styles.outside, props.outsideClassName)
+  const _disabledClassName = cx(styles.disabled, props.disabledClassName)
+  const _hiddenClassName = cx(styles.hidden, props.hiddenClassName)
+
+  const Dropdown = React.useCallback(
+    ({ value, onChange, options }: React.ComponentProps<typeof DropDownDayPicker>) => {
+      const selected = options?.find((option) => option.value === value)
+      const handleChange = (newValue: string) => {
+        const changeEvent = {
+          target: { value: newValue },
+        } as React.ChangeEvent<HTMLSelectElement>
+        onChange?.(changeEvent)
+      }
+      return (
+        <SelectPrimitive.Root
+          value={value?.toString()}
+          onValueChange={(newValue) => {
+            handleChange(newValue as string)
+          }}
+        >
+          <SelectPrimitive.Trigger
+            render={
+              <Button
+                variant="outlined"
+                size="sm"
+                className={cx(styles['select-trigger'], props.selectTriggerClassName)}
+              />
+            }
+          >
+            <SelectPrimitive.Value>{() => selected?.label}</SelectPrimitive.Value>
+            <SelectPrimitive.Icon>
+              <ChevronsUpDown height="18px" width="18px" svgClassName={styles['select-chevrons']} />
+            </SelectPrimitive.Icon>
+          </SelectPrimitive.Trigger>
+          <SelectPrimitive.Portal>
+            <SelectPrimitive.Positioner
+              className={styles['select-content']}
+              sideOffset={4}
+              align="center"
+              alignItemWithTrigger={false}
+            >
+              <SelectPrimitive.Popup>
+                <ScrollArea className={cx(styles['scroll-area'])}>
+                  <SelectPrimitive.List>
+                    {options?.map(({ value, label, disabled }, id) => (
+                      <SelectPrimitive.Item
+                        className={styles['select-item']}
+                        key={`${value}-${id}`}
+                        value={value?.toString()}
+                        disabled={disabled}
+                      >
+                        <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>
+                      </SelectPrimitive.Item>
+                    ))}
+                  </SelectPrimitive.List>
+                </ScrollArea>
+              </SelectPrimitive.Popup>
+            </SelectPrimitive.Positioner>
+          </SelectPrimitive.Portal>
+        </SelectPrimitive.Root>
+      )
+    },
+    [props.selectTriggerClassName]
+  )
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      hideNavigation={true} // Ensure navigation is hidden
+      className={cx(styles['day-picker'], className)}
+      classNames={{
+        caption_label: _captionLabelClassName,
+        day: _dayClassName,
+        day_button: _dayButtonClassName,
+        dropdowns: _dropdownsClassName,
+        footer: _footerClassName,
+        month: props.monthClassName,
+        month_caption: _monthCaptionClassName,
+        month_grid: _monthGridClassName,
+        months: _monthsClassName,
+        week: _weekClassName,
+        weekday: _weekdayClassName,
+        weekdays: _weekdaysClassName,
+        range_end: _rangeEndClassName,
+        range_middle: _rangeMiddleClassName,
+        range_start: _rangeStartClassName,
+        selected: _selectedClassName,
+        disabled: _disabledClassName,
+        hidden: _hiddenClassName,
+        outside: _outsideClassName,
+        today: _todayClassName,
+        nav: 'hidden', // This hides the navigation (chevrons)
+        ...classNames,
+      }}
+      components={{
+        Dropdown,
+        ...customComponents,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'

package/src/components/inputs/checkbox-group.module.css

@@ -0,0 +1,15 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  :global(.infonomic-checkbox-group),
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
+}

package/src/components/inputs/checkbox-group.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import type React from 'react'
+import { useEffect, useState } from 'react'
+
+import cx from 'classnames'
+
+import { Checkbox } from './checkbox.jsx'
+import styles from './checkbox-group.module.css'
+
+export interface CheckboxGroupProps {
+  groupName: string
+  className?: string
+  checkBoxClasses?: string
+  checkBoxes: { id: string; label: string }[]
+  defaultValues?: string[]
+  controlledValue?: string
+  disabled?: boolean
+  onChange?: (selectedRoles: string[]) => void
+}
+
+export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+  groupName,
+  className,
+  checkBoxClasses,
+  checkBoxes,
+  defaultValues,
+  controlledValue,
+  disabled = false,
+  onChange,
+}) => {
+  let initialValue: string[] = []
+  if (controlledValue !== undefined && controlledValue.length > 0) {
+    initialValue = controlledValue.split(',')
+  } else if (defaultValues !== undefined) {
+    initialValue = defaultValues
+  }
+
+  const [selected, setSelected] = useState<string[]>(initialValue)
+
+  // We have to call setSelected here in useEffect to
+  // synchronize controlledValue - we can't rely on
+  // initialValue alone
+  useEffect(() => {
+    if (controlledValue !== undefined && controlledValue.length > 0) {
+      setSelected(controlledValue.split(','))
+    } else if (defaultValues !== undefined) {
+      setSelected(defaultValues)
+    } else {
+      setSelected([])
+    }
+  }, [controlledValue, defaultValues])
+
+  const handleCheckboxChange = (id: string, checked: boolean) => {
+    const s = [...selected]
+    if (checked === true) {
+      if (s.includes(id) === false) {
+        s.push(id)
+      }
+    } else {
+      const index = s.indexOf(id)
+      if (index !== -1) {
+        s.splice(index, 1)
+      }
+    }
+    setSelected(s)
+    onChange?.(s)
+  }
+
+  return (
+    <div className={cx('infonomic-checkbox-group', styles['checkbox-group'], className)}>
+      {checkBoxes.map((cb) => (
+        <Checkbox
+          key={cb.id}
+          id={`${groupName}-${cb.id}`}
+          name={`${groupName}-${cb.id}`}
+          label={cb.label}
+          checkBoxClasses={checkBoxClasses}
+          checked={selected.includes(cb.id)}
+          disabled={disabled}
+          onCheckedChange={(checked) => handleCheckboxChange(cb.id, checked)}
+        />
+      ))}
+    </div>
+  )
+}