@santi020k/lumen-astro 0.1.0 → 0.3.0

package/README.md

@@ -21,6 +21,7 @@ enhances all matching Lumen markup on the page.
 With Tailwind, keep the Lumen import in the same shared CSS entry:
 
 ```css
+@import "@santi020k/lumen-astro/layers.css";
 @import "tailwindcss";
 @import "@santi020k/lumen-astro/styles.css";
 ```
@@ -60,6 +61,33 @@ import { Button, Icon } from '@santi020k/lumen-astro'
 <Icon name="search" label="Search" />
 ```
 
+Lucide intentionally excludes brand marks. For GitHub and other project-specific icons, put the
+SVG in the default slot instead of passing an unsupported `name`; Astro warns about unknown named
+icons during development.
+
+## Code tabs
+
+Use `CodeTabs` for related install commands, language variants, or configuration examples. Each
+item supplies a stable value, visible label, code string, and optional language. A shared
+`storageKey` keeps matching instances synchronized and remembers the reader's selection.
+
+```astro
+---
+import { CodeTabs } from '@santi020k/lumen-astro'
+
+const installCommands = [
+  { value: 'pnpm', label: 'pnpm', code: 'pnpm add @santi020k/lumen-astro', language: 'bash' },
+  { value: 'npm', label: 'npm', code: 'npm install @santi020k/lumen-astro', language: 'bash' }
+]
+---
+
+<CodeTabs
+  ariaLabel="Package manager"
+  items={installCommands}
+  storageKey="preferred-package-manager"
+/>
+```
+
 ## Optimized images
 
 Lumen's Astro `Image` delegates to `astro:assets`, so imported image metadata, responsive layouts,

package/components/Accordion.astro

@@ -3,24 +3,30 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 import type { HTMLAttributes } from 'astro/types'
 
+type AccordionVariant = 'default' | 'flush'
+
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
+  variant?: AccordionVariant
 }
 
 const {
   class: classProp = '',
   className = '',
+  variant = 'default',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-accordion'
+    'ui-accordion',
+    variant === 'flush' && 'ui-accordion--flush'
 ], classProp, className)
 ---
 
 <div
   class:list={classList}
+  data-variant={variant}
   {...passthrough}
 >
   <slot />

package/components/Affix.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
   offset?: number
   offsetBottom?: number

package/components/Agenda.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'section'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
 }

package/components/Alert.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'aside'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   variant?: 'default' | 'destructive' | 'success' | 'warning'

package/components/AlertDialog.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'dialog'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   /**

package/components/Anchor.astro

@@ -6,7 +6,7 @@ import type { HTMLAttributes } from 'astro/types'
 type AnchorLink = { href: string; label: string }
 
 export interface Props extends HTMLAttributes<'nav'> {
-  class?: string
+  class?: string | null
   className?: string
   items?: AnchorLink[]
 }

package/components/AnimatedLogo.astro

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'span'> {
   animation?: 'reveal' | 'sequence'
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/AnimatedNumber.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends Omit<HTMLAttributes<'span'>, 'prefix'> {
-  class?: string
+  class?: string | null
   className?: string
   decimals?: number
   duration?: 'fast' | 'standard' | 'slow'

package/components/AnimatedPortrait.astro

@@ -17,7 +17,7 @@ interface Props extends HTMLAttributes<'div'> {
       text: string
     }
   }
-  class?: string
+  class?: string | null
   className?: string
   showFloatingBadges?: boolean
   sizes?: string

package/components/AspectRatio.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
   ratio?: number | string
 }

package/components/Attachment.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'article'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   href?: string

package/components/Autocomplete.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'input'> {
-  class?: string
+  class?: string | null
   className?: string
   list: string
 }

package/components/Avatar.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'span'> {
-  class?: string
+  class?: string | null
   className?: string
   alt?: string
   fallback?: string

package/components/BackToTop.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'button'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/Badge.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'span'> {
-  class?: string
+  class?: string | null
   className?: string
   variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning'
 }

package/components/Breadcrumb.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'nav'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/Bubble.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'article'> {
-  class?: string
+  class?: string | null
   className?: string
   from?: 'user' | 'assistant'
   glass?: boolean | 'subtle' | 'strong'

package/components/Button.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'button'> {
-  class?: string
+  class?: string | null
   className?: string
   loading?: boolean
   size?: 'default' | 'sm' | 'lg' | 'icon'

package/components/ButtonGroup.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/ButtonLink.astro

@@ -6,13 +6,13 @@ import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'a'> {
   ariaLabel?: string
-  class?: string
+  class?: string | null
   className?: string
   href: string
   newTab?: boolean
   shape?: 'default' | 'icon'
   showArrow?: boolean
-  variant?: 'ghost' | 'inline' | 'primary' | 'secondary'
+  variant?: 'ghost' | 'inline' | 'primary' | 'secondary' | 'unstyled'
 }
 
 const {
@@ -29,12 +29,13 @@ const {
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-button-link',
-  'group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]',
-  variant !== 'inline' && 'min-h-11 rounded-full border',
+  variant !== 'unstyled' && 'group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]',
+  variant !== 'inline' && variant !== 'unstyled' && 'min-h-11 rounded-full border',
   variant === 'primary' && 'ui-button ui-button--primary',
   variant === 'secondary' && 'ui-button ui-button--secondary',
   variant === 'ghost' && 'ui-button ui-button--ghost',
   variant === 'inline' && 'ui-button ui-button--inline',
+  variant === 'unstyled' && 'ui-button-link--unstyled',
   shape === 'icon' && variant !== 'inline' && 'ui-button-link--icon'
 ], classProp, className)
 ---

package/components/Calendar.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends Omit<HTMLAttributes<'div'>, 'value'> {
-  class?: string
+  class?: string | null
   className?: string
   disabled?: boolean
   glass?: boolean | 'subtle' | 'strong'

package/components/Callout.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'aside'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/Card.astro

@@ -5,10 +5,10 @@ import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
   as?: 'article' | 'div' | 'section'
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
-  variant?: 'default' | 'glass' | 'interactive' | 'muted'
+  variant?: 'default' | 'glass' | 'interactive' | 'muted' | 'unstyled'
 }
 
 const {
@@ -23,6 +23,7 @@ const {
 const isGlass = glass || variant === 'glass'
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
     'ui-card',
+    variant === 'unstyled' && 'ui-card--unstyled',
     variant === 'muted' && 'ui-card--muted',
     variant === 'interactive' && 'ui-card--interactive',
     isGlass && 'ui-card--glass',

package/components/Carousel.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'section'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
 }

package/components/Cascader.astro

@@ -10,7 +10,7 @@ interface CascaderOption {
 }
 
 export interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
   name?: string
   options?: CascaderOption[]

package/components/Chart.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'figure'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
 }

package/components/Checkbox.astro

@@ -6,7 +6,7 @@ import type { HTMLAttributes } from 'astro/types'
 type HTMLInputAttributes = HTMLAttributes<'input'>
 
 interface Props extends Omit<HTMLInputAttributes, 'type'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/Code.astro

@@ -7,7 +7,7 @@ type CodeTheme = 'auto' | 'lumen' | 'santi020k'
 type CodeVariant = 'block' | 'inline'
 
 interface Props extends HTMLAttributes<'code'> {
-  class?: string
+  class?: string | null
   className?: string
   code?: string
   copy?: boolean
@@ -16,6 +16,7 @@ interface Props extends HTMLAttributes<'code'> {
   language?: string
   theme?: CodeTheme
   variant?: CodeVariant
+  wrap?: boolean
 }
 
 const {
@@ -28,12 +29,14 @@ const {
   language,
   theme = 'auto',
   variant = 'inline',
+  wrap = false,
   ...rest
 } = Astro.props
 
 const { classList: blockClassList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-code',
-  'ui-code--block'
+  'ui-code--block',
+  wrap && 'ui-code--wrap'
 ], classProp, className)
 const { classList: inlineClassList } = resolveLumenAstroProps(rest, [
   'ui-code',

package/components/CodeTabs.astro

@@ -0,0 +1,92 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+import Code from './Code.astro'
+import Tabs from './Tabs.astro'
+
+type CodeTheme = 'auto' | 'lumen' | 'santi020k'
+
+export interface CodeTabItem {
+  code: string
+  label: string
+  language?: string
+  value: string
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  ariaLabel?: string
+  class?: string | null
+  className?: string
+  copy?: boolean
+  initialValue?: string
+  items: readonly CodeTabItem[]
+  storageKey?: string
+  theme?: CodeTheme
+  wrap?: boolean
+}
+
+const {
+  ariaLabel = 'Code examples',
+  class: classProp = '',
+  className = '',
+  copy = true,
+  initialValue,
+  items,
+  storageKey,
+  theme = 'auto',
+  wrap = true,
+  ...rest
+} = Astro.props
+
+const selectedValue = initialValue ?? items[0]?.value
+const tabsStateProps = {
+  ...(selectedValue === undefined ? {} : { initialValue: selectedValue }),
+  ...(storageKey === undefined ? {} : { storageKey })
+}
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest,
+  ['ui-code-tabs'],
+  classProp ?? '',
+  className
+)
+---
+
+<Tabs
+  class:list={classList}
+  {...tabsStateProps}
+  {...passthrough}
+>
+  <div class="ui-code-tabs__list" role="tablist" aria-label={ariaLabel}>
+    {items.map(item => (
+      <button
+        aria-selected={item.value === selectedValue ? 'true' : 'false'}
+        class="ui-code-tabs__tab"
+        data-value={item.value}
+        role="tab"
+        type="button"
+      >
+        {item.label}
+      </button>
+    ))}
+  </div>
+
+  {items.map(item => (
+    <div
+      class="ui-code-tabs__panel"
+      data-value={item.value}
+      hidden={item.value !== selectedValue}
+      role="tabpanel"
+    >
+      <Code
+        code={item.code}
+        copy={copy}
+        {...(item.language === undefined ? {} : { language: item.language })}
+        theme={theme}
+        variant="block"
+        wrap={wrap}
+      />
+    </div>
+  ))}
+</Tabs>

package/components/Collapsible.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'details'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/ColorPicker.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'input'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/Combobox.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'input'> {
-  class?: string
+  class?: string | null
   className?: string
   label?: string
   list: string

package/components/Command.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
 }

package/components/ContextMenu.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'menu'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   /**

package/components/CoverImage.astro

@@ -8,7 +8,7 @@ import type { HTMLAttributes } from 'astro/types'
 interface Props extends HTMLAttributes<'div'> {
   alt: string
   ariaHidden?: boolean
-  class?: string
+  class?: string | null
   className?: string
   featured?: boolean
   featuredMinHeightClass?: string

package/components/DataTable.astro

@@ -30,7 +30,7 @@ type DataTableRow = Record<string, DataTableCell> & {
 }
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
   columns?: DataTableColumn[]
   glass?: boolean | 'subtle' | 'strong'

package/components/DatePicker.astro

@@ -5,7 +5,7 @@ import Calendar from './Calendar.astro'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'input'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   placeholder?: string

package/components/DateRangePicker.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
 }
 

package/components/Descriptions.astro

@@ -6,7 +6,7 @@ import type { HTMLAttributes } from 'astro/types'
 type DescriptionItem = { label: string; value: string }
 
 interface Props extends HTMLAttributes<'dl'> {
-  class?: string
+  class?: string | null
   className?: string
   columns?: number
   items?: DescriptionItem[]

package/components/Dialog.astro

@@ -4,9 +4,10 @@ import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'dialog'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
+  layout?: 'centered' | 'fullscreen'
   /**
    * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
    */
@@ -17,6 +18,7 @@ const {
   class: classProp = '',
   className = '',
   glass = false,
+  layout = 'centered',
   surface = 'default',
   ...rest
 } = Astro.props
@@ -24,6 +26,7 @@ const {
 const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
     'ui-dialog',
+    layout === 'fullscreen' && 'ui-dialog--fullscreen',
     resolvedGlass && 'ui-dialog--glass',
     glass === 'subtle' && 'ui-glass-subtle',
     glass === 'strong' && 'ui-glass-strong'
@@ -32,6 +35,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 
 <dialog
   data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-layout={layout}
   data-ui-dialog
   class:list={classList}
   {...passthrough}

package/components/Direction.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'div'> {
-  class?: string
+  class?: string | null
   className?: string
   dir?: 'ltr' | 'rtl' | 'auto'
 }

package/components/Drawer.astro

@@ -4,7 +4,7 @@ import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core
 import type { HTMLAttributes } from 'astro/types'
 
 interface Props extends HTMLAttributes<'dialog'> {
-  class?: string
+  class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   /**