@exsto/ds 0.0.1-rc.22 → 0.0.1-rc.24

package/dist/ui/src/components/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../../../../../ui/src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { useHoldsFocusable } from '@edyn/ui/hooks/use-holds-focusable';\nimport { useMergedRefs } from '@edyn/ui/hooks/use-merged-refs';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { createContext, useContext, useEffect, useRef } from 'react';\n\nexport interface ITabsProps extends Omit<BaseTabs.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'className' | 'orientation' | 'children'> {\n  /** Controlled selected tab. Provide with `onValueChange`. */\n  value?: string;\n  /** Uncontrolled initial tab. Use this when the component should own its state. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  className?: string;\n  orientation?: 'horizontal' | 'vertical';\n  children: React.ReactNode;\n}\n\nconst OrientationContext = createContext<'horizontal' | 'vertical'>('horizontal');\n\nexport const Tabs = ({ value, defaultValue, onValueChange, className, orientation = 'horizontal', children, ...props }: ITabsProps) => (\n  <BaseTabs.Root\n    data-slot=\"tabs\"\n    {...props}\n    data-orientation={orientation}\n    value={value}\n    defaultValue={defaultValue}\n    orientation={orientation}\n    onValueChange={(next) => {\n      onValueChange?.(String(next));\n    }}\n    className={cn('group/tabs flex w-full gap-2 data-[orientation=horizontal]:flex-col', className)}\n  >\n    <OrientationContext value={orientation}>{children}</OrientationContext>\n  </BaseTabs.Root>\n);\n\nexport const tabsListVariants = cva(\n  'group/tabs-list flex w-fit items-center group-data-[orientation=horizontal]/tabs:min-w-max justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-muted',\n        line: 'gap-1 bg-transparent',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport interface ITabsListProps extends VariantProps<typeof tabsListVariants>, Omit<BaseTabs.List.Props, 'className' | 'children'> {\n  className?: string;\n  children: React.ReactNode;\n}\n\n/** Room kept between a tab and the edge it is scrolled to: the 24px edge fade and a little more. */\nconst REVEAL_MARGIN = 32;\n\n/** Scrolls a list sideways, inside its viewport only, until a tab stands clear of both edge fades. */\nconst reveal = (viewport: HTMLElement, tab: Element | null) => {\n  if (!tab) {\n    return;\n  }\n  const edge = viewport.getBoundingClientRect();\n  const box = tab.getBoundingClientRect();\n  if (box.left < edge.left + REVEAL_MARGIN) {\n    viewport.scrollBy({ left: box.left - edge.left - REVEAL_MARGIN });\n  } else if (box.right > edge.right - REVEAL_MARGIN) {\n    viewport.scrollBy({ left: box.right - edge.right + REVEAL_MARGIN });\n  }\n};\n\n/**\n * A row of tabs wider than its box scrolls sideways inside it, with a fade at each edge that hides tabs, and the selected tab\n * (and the one holding focus) is scrolled into view. A vertical list is not wrapped.\n */\nexport const TabsList = ({ className, variant = 'default', children, ref, ...props }: ITabsListProps) => {\n  const horizontal = useContext(OrientationContext) === 'horizontal';\n  const refViewport = useRef<HTMLDivElement | null>(null);\n  const refList = useRef<HTMLDivElement | null>(null);\n  const refs = useMergedRefs(refList, ref);\n\n  useEffect(() => {\n    const viewport = refViewport.current;\n    const list = refList.current;\n    if (!horizontal || !viewport || !list) {\n      return;\n    }\n    const revealSelected = () => reveal(viewport, list.querySelector('[aria-selected=\"true\"]'));\n    const revealFocused = (event: FocusEvent) => reveal(viewport, (event.target as Element).closest('[role=\"tab\"]'));\n    revealSelected();\n    const observer = new MutationObserver(revealSelected);\n    observer.observe(list, { subtree: true, attributes: true, attributeFilter: ['aria-selected'] });\n    list.addEventListener('focusin', revealFocused);\n    return () => {\n      observer.disconnect();\n      list.removeEventListener('focusin', revealFocused);\n    };\n  }, [horizontal]);\n\n  const list = (\n    <BaseTabs.List data-slot=\"tabs-list\" {...props} data-variant={variant} ref={refs} className={cn(tabsListVariants({ variant }), className)}>\n      {children}\n    </BaseTabs.List>\n  );\n  return horizontal ? (\n    <ScrollArea orientation=\"horizontal\" fade viewportRef={refViewport}>\n      {list}\n    </ScrollArea>\n  ) : (\n    list\n  );\n};\n\nexport interface ITabsTriggerProps extends Omit<BaseTabs.Tab.Props, 'value' | 'disabled' | 'className' | 'children'> {\n  value: string;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TabsTrigger = ({ value, disabled, className, children, ...props }: ITabsTriggerProps) => (\n  <BaseTabs.Tab\n    {...props}\n    value={value}\n    disabled={disabled}\n    className={cn(\n      'relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-4',\n      'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n      'data-active:bg-background data-active:text-foreground dark:data-active:border-control dark:data-active:bg-input/30 dark:data-active:text-foreground',\n      'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n      className,\n    )}\n  >\n    {children}\n  </BaseTabs.Tab>\n);\n\nexport interface ITabsContentProps extends Omit<BaseTabs.Panel.Props, 'value' | 'keepMounted' | 'className' | 'children'> {\n  value: string;\n  keepMounted?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/** Base UI makes every open panel a tab stop; undefined takes that away. */\nconst NO_TAB_STOP = { tabIndex: undefined } as const;\n\n/** A panel takes Tab only when nothing inside it can, and then shows a 1px line inside its edge (focus.css). */\nexport const TabsContent = ({ value, keepMounted = false, className, children, ref, ...props }: ITabsContentProps) => {\n  const refPanel = useRef<HTMLDivElement | null>(null);\n  const refs = useMergedRefs(refPanel, ref);\n  const holdsFocusable = useHoldsFocusable(refPanel);\n  return (\n    <BaseTabs.Panel\n      data-slot=\"tabs-content\"\n      {...(holdsFocusable ? NO_TAB_STOP : null)}\n      {...props}\n      ref={refs}\n      value={value}\n      keepMounted={keepMounted}\n      className={cn('flex-1 text-sm outline-none', className)}\n    >\n      {children}\n    </BaseTabs.Panel>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../../../../../ui/src/components/ui/tabs/tabs.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { useHoldsFocusable } from '@edyn/ui/hooks/use-holds-focusable';\nimport { useMergedRefs } from '@edyn/ui/hooks/use-merged-refs';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { createContext, useContext, useEffect, useRef } from 'react';\n\nexport interface ITabsProps extends Omit<BaseTabs.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'className' | 'orientation' | 'children'> {\n  /** Controlled selected tab. Provide with `onValueChange`. */\n  value?: string;\n  /** Uncontrolled initial tab. Use this when the component should own its state. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  className?: string;\n  orientation?: 'horizontal' | 'vertical';\n  children: React.ReactNode;\n}\n\nconst OrientationContext = createContext<'horizontal' | 'vertical'>('horizontal');\n\nexport const Tabs = ({ value, defaultValue, onValueChange, className, orientation = 'horizontal', children, ...props }: ITabsProps) => (\n  <BaseTabs.Root\n    data-slot=\"tabs\"\n    {...props}\n    data-orientation={orientation}\n    value={value}\n    defaultValue={defaultValue}\n    orientation={orientation}\n    onValueChange={(next) => {\n      onValueChange?.(String(next));\n    }}\n    className={cn('group/tabs flex w-full gap-2 data-[orientation=horizontal]:flex-col', className)}\n  >\n    <OrientationContext value={orientation}>{children}</OrientationContext>\n  </BaseTabs.Root>\n);\n\nexport const tabsListVariants = cva(\n  'group/tabs-list flex w-fit items-center group-data-[orientation=horizontal]/tabs:min-w-max justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-muted',\n        line: 'gap-1 bg-transparent',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport interface ITabsListProps extends VariantProps<typeof tabsListVariants>, Omit<BaseTabs.List.Props, 'className' | 'children'> {\n  className?: string;\n  children: React.ReactNode;\n}\n\n/** Room kept between a tab and the edge it is scrolled to: the 24px edge fade and a little more. */\nconst REVEAL_MARGIN = 32;\n\n/** Scrolls a list sideways, inside its viewport only, until a tab stands clear of both edge fades. */\nconst reveal = (viewport: HTMLElement, tab: Element | null) => {\n  if (!tab) {\n    return;\n  }\n  const edge = viewport.getBoundingClientRect();\n  const box = tab.getBoundingClientRect();\n  if (box.left < edge.left + REVEAL_MARGIN) {\n    viewport.scrollBy({ left: box.left - edge.left - REVEAL_MARGIN });\n  } else if (box.right > edge.right - REVEAL_MARGIN) {\n    viewport.scrollBy({ left: box.right - edge.right + REVEAL_MARGIN });\n  }\n};\n\n/**\n * A row of tabs wider than its box scrolls sideways inside it, with a fade at each edge that hides tabs, and the selected tab\n * (and the one holding focus) is scrolled into view. A vertical list is not wrapped.\n */\nexport const TabsList = ({ className, variant = 'default', children, ref, ...props }: ITabsListProps) => {\n  const horizontal = useContext(OrientationContext) === 'horizontal';\n  const refViewport = useRef<HTMLDivElement | null>(null);\n  const refList = useRef<HTMLDivElement | null>(null);\n  const refs = useMergedRefs(refList, ref);\n\n  useEffect(() => {\n    const viewport = refViewport.current;\n    const list = refList.current;\n    if (!horizontal || !viewport || !list) {\n      return;\n    }\n    const revealSelected = () => reveal(viewport, list.querySelector('[aria-selected=\"true\"]'));\n    const revealFocused = (event: FocusEvent) => reveal(viewport, (event.target as Element).closest('[role=\"tab\"]'));\n    // Until the reader scrolls, a change of size (a font, a data load) keeps the chosen tab clear of the fades.\n    let reader = false;\n    const take = () => {\n      reader = true;\n    };\n    const sizes = new ResizeObserver(() => reader || revealSelected());\n    const events = ['wheel', 'pointerdown', 'keydown', 'touchstart'] as const;\n    revealSelected();\n    sizes.observe(list);\n    sizes.observe(viewport);\n    for (const name of events) {\n      viewport.addEventListener(name, take, { passive: true });\n    }\n    const observer = new MutationObserver(revealSelected);\n    observer.observe(list, { subtree: true, attributes: true, attributeFilter: ['aria-selected'] });\n    list.addEventListener('focusin', revealFocused);\n    return () => {\n      observer.disconnect();\n      sizes.disconnect();\n      for (const name of events) {\n        viewport.removeEventListener(name, take);\n      }\n      list.removeEventListener('focusin', revealFocused);\n    };\n  }, [horizontal]);\n\n  const list = (\n    <BaseTabs.List data-slot=\"tabs-list\" {...props} data-variant={variant} ref={refs} className={cn(tabsListVariants({ variant }), className)}>\n      {children}\n    </BaseTabs.List>\n  );\n  return horizontal ? (\n    <ScrollArea orientation=\"horizontal\" fade viewportRef={refViewport}>\n      {list}\n    </ScrollArea>\n  ) : (\n    list\n  );\n};\n\nexport interface ITabsTriggerProps extends Omit<BaseTabs.Tab.Props, 'value' | 'disabled' | 'className' | 'children'> {\n  value: string;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport const TabsTrigger = ({ value, disabled, className, children, ...props }: ITabsTriggerProps) => (\n  <BaseTabs.Tab\n    {...props}\n    value={value}\n    disabled={disabled}\n    className={cn(\n      'relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-4',\n      'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n      'data-active:bg-background data-active:text-foreground dark:data-active:border-control dark:data-active:bg-input/30 dark:data-active:text-foreground',\n      'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n      className,\n    )}\n  >\n    {children}\n  </BaseTabs.Tab>\n);\n\nexport interface ITabsContentProps extends Omit<BaseTabs.Panel.Props, 'value' | 'keepMounted' | 'className' | 'children'> {\n  value: string;\n  keepMounted?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/** Base UI makes every open panel a tab stop; undefined takes that away. */\nconst NO_TAB_STOP = { tabIndex: undefined } as const;\n\n/** A panel takes Tab only when nothing inside it can, and then shows a 1px line inside its edge (focus.css). */\nexport const TabsContent = ({ value, keepMounted = false, className, children, ref, ...props }: ITabsContentProps) => {\n  const refPanel = useRef<HTMLDivElement | null>(null);\n  const refs = useMergedRefs(refPanel, ref);\n  const holdsFocusable = useHoldsFocusable(refPanel);\n  return (\n    <BaseTabs.Panel\n      data-slot=\"tabs-content\"\n      {...(holdsFocusable ? NO_TAB_STOP : null)}\n      {...props}\n      ref={refs}\n      value={value}\n      keepMounted={keepMounted}\n      className={cn('flex-1 text-sm outline-none', className)}\n    >\n      {children}\n    </BaseTabs.Panel>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.22",
+  "version": "0.0.1-rc.24",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [
@@ -35,6 +35,14 @@
       "types": "./dist/ds/src/time-field.d.ts",
       "default": "./dist/time-field.js"
     },
+    "./date-time": {
+      "types": "./dist/ds/src/date-time.d.ts",
+      "default": "./dist/date-time.js"
+    },
+    "./color-field": {
+      "types": "./dist/ds/src/color-field.d.ts",
+      "default": "./dist/color-field.js"
+    },
     "./file-input": {
       "types": "./dist/ds/src/file-input.d.ts",
       "default": "./dist/file-input.js"