@maestro-js/components 1.0.0-alpha.19 → 1.0.0-alpha.2

package/src/utils/use-tab-indicator.ts

@@ -3,7 +3,7 @@ import * as React from 'react'
 // --- Shared Tab Styles ---
 
 export const TAB_BASE_CLASSES = 'relative px-4 py-2 text-sm cursor-default transition-colors duration-200'
-export const TAB_INACTIVE_CLASSES = 'text-neutral-600 font-medium'
+export const TAB_INACTIVE_CLASSES = 'text-neutral-500 font-medium'
 export const TAB_DISABLED_CLASSES = 'opacity-50 cursor-not-allowed'
 
 // --- Tab Variant ---
@@ -14,9 +14,9 @@ export type TabVariant = 'underline' | 'oval'
 
 export const tabColorMap = {
   primary: {
-    text: 'text-primary-600',
-    bg: 'bg-primary-600',
-    outline: 'outline-primary-600'
+    text: 'text-primary-500',
+    bg: 'bg-primary-500',
+    outline: 'outline-primary-500'
   },
   neutral: {
     text: 'text-neutral-800',
@@ -31,7 +31,7 @@ export type TabColor = keyof typeof tabColorMap
 
 export const tabListContainerClasses: Record<TabVariant, string> = {
   underline: 'relative',
-  oval: 'relative inline-flex bg-neutral-100 rounded-lg p-1'
+  oval: 'relative inline-flex bg-neutral-100 rounded-full p-1'
 }
 
 export const tabListInnerClasses: Record<TabVariant, string> = {
@@ -41,13 +41,13 @@ export const tabListInnerClasses: Record<TabVariant, string> = {
 
 export function getIndicatorClasses(variant: TabVariant, color: TabColor): string {
   if (variant === 'underline') {
-    return `absolute bottom-0 h-0.5 rounded-full ${tabColorMap[color].bg}`
+    return `absolute bottom-0 h-[3px] rounded-full ${tabColorMap[color].bg}`
   }
-  return 'absolute inset-y-1 rounded-md bg-white shadow-sm'
+  return `absolute inset-y-1 rounded-full ${tabColorMap[color].bg}`
 }
 
-export const TAB_OVAL_BASE_CLASSES = 'relative z-10 px-4 py-1.5 text-sm cursor-default transition-colors duration-200 rounded-md'
-export const TAB_OVAL_SELECTED_CLASSES = 'text-neutral-900 font-semibold'
+export const TAB_OVAL_BASE_CLASSES = 'relative z-10 px-4 py-1.5 text-sm cursor-default transition-colors duration-200 rounded-full'
+export const TAB_OVAL_SELECTED_CLASSES = 'text-white font-semibold'
 
 // --- Animated Indicator Hook ---
 

package/src/components/date-range.tsx

@@ -1,138 +0,0 @@
-import * as React from 'react'
-import {
-  RangeCalendar,
-  CalendarGrid,
-  CalendarCell,
-  Heading,
-  CalendarGridHeader,
-  CalendarHeaderCell,
-  CalendarGridBody,
-  Button,
-  I18nProvider
-} from 'react-aria-components'
-import { twMerge } from 'tailwind-merge'
-import { parseDate, type CalendarDate, type DateValue } from '@internationalized/date'
-import type { Iso } from 'iso-fns'
-import { Icon } from './icon'
-
-export type DateRangeRootAdditionalProps = {
-  defaultStart: Iso.Date | null
-  defaultEnd: Iso.Date | null
-  shouldDisableDate: (date: string) => boolean
-  shouldDisableStartDate: (date: string) => boolean
-  shouldDisableEndDate: (date: string) => boolean
-}
-
-type DateRangePickerProps = {
-  start: Iso.Date | null
-  end: Iso.Date | null
-  onStartChange: (value: Iso.Date | null, field: 'start' | 'end' | null) => void
-  onEndChange: (value: Iso.Date | null, field: 'start' | 'end' | null) => void
-  currentField: 'start' | 'end' | null
-  shouldDisableDate?: (date: string) => boolean
-  shouldDisableStartDate?: (date: string) => boolean
-  shouldDisableEndDate?: (date: string) => boolean
-}
-
-export function DateRangePicker(props: DateRangePickerProps) {
-  const ariaValue = React.useMemo(() => {
-    if (!props.start || !props.end) return null
-    try {
-      return { start: parseDate(props.start), end: parseDate(props.end) }
-    } catch {
-      return null
-    }
-  }, [props.start, props.end])
-
-  const handleChange = (range: { start: CalendarDate; end: CalendarDate } | null) => {
-    if (!range) {
-      props.onStartChange(null, null)
-      props.onEndChange(null, null)
-      return
-    }
-    const start = range.start.toString() as Iso.Date
-    const end = range.end.toString() as Iso.Date
-    props.onStartChange(start, 'end')
-    props.onEndChange(end, null)
-  }
-
-  const isDateUnavailable = React.useCallback(
-    (date: DateValue) => {
-      const dateStr = date.toString()
-      return props.shouldDisableDate?.(dateStr) ?? false
-    },
-    [props.shouldDisableDate]
-  )
-
-  return (
-    <I18nProvider locale="en">
-      <RangeCalendar
-        value={ariaValue}
-        onChange={handleChange}
-        isDateUnavailable={isDateUnavailable}
-        visibleDuration={{ months: 2 }}
-        className="text-sm"
-      >
-        <header className="flex items-center justify-between mb-2 px-1">
-          <Button slot="previous" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
-            <Icon name="chevron-left" />
-          </Button>
-          <Heading className="text-sm font-semibold text-neutral-900 flex-1 text-center" />
-          <Button slot="next" className="p-1 hover:bg-neutral-100 rounded cursor-pointer">
-            <Icon name="chevron-right" />
-          </Button>
-        </header>
-        <div className="flex gap-4">
-          <CalendarGrid>
-            <CalendarGridHeader>
-              {(day) => (
-                <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
-              )}
-            </CalendarGridHeader>
-            <CalendarGridBody>
-              {(date) => (
-                <CalendarCell
-                  date={date}
-                  className={({ isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, isDisabled, isUnavailable }) =>
-                    twMerge(
-                      'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
-                      'hover:bg-neutral-100',
-                      isOutsideMonth && 'text-neutral-300',
-                      (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
-                      isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
-                      (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500'
-                    )
-                  }
-                />
-              )}
-            </CalendarGridBody>
-          </CalendarGrid>
-          <CalendarGrid offset={{ months: 1 }}>
-            <CalendarGridHeader>
-              {(day) => (
-                <CalendarHeaderCell className="text-xs text-neutral-500 font-medium w-8 h-8">{day}</CalendarHeaderCell>
-              )}
-            </CalendarGridHeader>
-            <CalendarGridBody>
-              {(date) => (
-                <CalendarCell
-                  date={date}
-                  className={({ isSelected, isSelectionStart, isSelectionEnd, isOutsideMonth, isDisabled, isUnavailable }) =>
-                    twMerge(
-                      'w-8 h-8 text-sm rounded cursor-pointer flex items-center justify-center',
-                      'hover:bg-neutral-100',
-                      isOutsideMonth && 'text-neutral-300',
-                      (isDisabled || isUnavailable) && 'text-neutral-300 cursor-not-allowed',
-                      isSelected && !isSelectionStart && !isSelectionEnd && 'bg-primary-500/20',
-                      (isSelectionStart || isSelectionEnd) && 'bg-primary-500 text-white hover:bg-primary-500'
-                    )
-                  }
-                />
-              )}
-            </CalendarGridBody>
-          </CalendarGrid>
-        </div>
-      </RangeCalendar>
-    </I18nProvider>
-  )
-}

package/src/components/optional-link.tsx

@@ -1,15 +0,0 @@
-import { type LinkProps, Link } from 'react-router'
-import React from 'react'
-
-export type OptionalLinkProps = Omit<LinkProps, 'to'> & { to?: LinkProps['to']; disabled?: boolean }
-
-export const OptionalLink = React.forwardRef<HTMLAnchorElement, OptionalLinkProps>(
-  ({ to, onClick, disabled, ...props }, ref) => {
-    if (to && !disabled) {
-      return <Link to={to} onClick={onClick} {...props} ref={ref} />
-    } else {
-      return <span {...props} ref={ref} />
-    }
-  }
-)
-OptionalLink.displayName = 'OptionalLink'