@santi020k/lumen-astro 0.2.0 → 0.3.0

package/README.md

@@ -65,6 +65,29 @@ Lucide intentionally excludes brand marks. For GitHub and other project-specific
 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/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/Dialog.astro

@@ -7,6 +7,7 @@ interface Props extends HTMLAttributes<'dialog'> {
   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/index.d.ts

@@ -26,6 +26,7 @@ export { default as Cascader } from './components/Cascader.astro'
 export { default as Chart } from './components/Chart.astro'
 export { default as Checkbox } from './components/Checkbox.astro'
 export { default as Code } from './components/Code.astro'
+export { default as CodeTabs } from './components/CodeTabs.astro'
 export { default as Collapsible } from './components/Collapsible.astro'
 export { default as ColorPicker } from './components/ColorPicker.astro'
 export { default as Combobox } from './components/Combobox.astro'

package/index.ts

@@ -26,6 +26,7 @@ export { default as Cascader } from './components/Cascader.astro'
 export { default as Chart } from './components/Chart.astro'
 export { default as Checkbox } from './components/Checkbox.astro'
 export { default as Code } from './components/Code.astro'
+export { default as CodeTabs } from './components/CodeTabs.astro'
 export { default as Collapsible } from './components/Collapsible.astro'
 export { default as ColorPicker } from './components/ColorPicker.astro'
 export { default as Combobox } from './components/Combobox.astro'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -33,8 +33,8 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^0.2.0",
-    "@santi020k/lumen-core": "^0.2.0"
+    "@santi020k/lumen": "^0.3.0",
+    "@santi020k/lumen-core": "^0.3.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.10",