fulldev-ui 0.3.10 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/components/base/input/Input.astro

@@ -27,8 +27,8 @@ const {
   label,
   icon,
   // input attributes
-  name,
   placeholder,
+  name,
   type,
   value,
   disabled,

package/src/components/base/input/InputElement.astro

@@ -6,14 +6,22 @@ type Props = HTMLAttributes<'input'> & {
   variant?: 'outline'
 }
 
-const { variant = 'outline', type = 'text', ...rest } = Astro.props
+const {
+  placeholder,
+  name = placeholder,
+  variant = 'outline',
+  type = 'text',
+  ...rest
+} = Astro.props
 ---
 
 <Component
+  if={name}
   as="input"
   class="input-element"
-  if={true}
   {variant}
+  {placeholder}
+  {name}
   {...rest}
 />
 

package/src/components/base/textarea/TextareaElement.astro

@@ -6,14 +6,21 @@ type Props = HTMLAttributes<'textarea'> & {
   variant?: 'outline'
 }
 
-const { variant = 'outline', ...rest } = Astro.props
+const {
+  placeholder,
+  name = placeholder,
+  variant = 'outline',
+  ...rest
+} = Astro.props
 ---
 
 <Component
+  if={name}
   as="textarea"
   class="textarea-element"
-  if={true}
   {variant}
+  {placeholder}
+  {name}
   {...rest}
 />
 

package/src/components/{structure → segment}/Box.astro

@@ -3,19 +3,32 @@ import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  compact?: boolean
-  frame?: 'container' | 'wrapper' | 'panel' | 'viewport' | 'card' | 'none'
-  variant?: 'fill' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
+  align?: 'start' | 'center' | 'end'
+  structure?:
+    | 'bento'
+    | 'carousel'
+    | 'column'
+    | 'grid'
+    | 'masonry'
+    | 'row'
+    | 'split'
+    | 'spread'
+    | 'wrap'
 }
 
-const { ...rest } = Astro.props
+const {
+  as = 'div',
+  structure = 'column',
+  align = 'start',
+  ...rest
+} = Astro.props
 ---
 
 <Component
   class:list={['box']}
+  {as}
+  {structure}
+  {align}
   {...rest}
 >
   <slot />
@@ -25,6 +38,5 @@ const { ...rest } = Astro.props
   @import '../../css/utils.scss';
 
   @include component('box') {
-    position: relative;
   }
 </style>

package/src/components/segment/Card.astro

@@ -80,6 +80,10 @@ const {
       aspect-ratio: 3/4;
     }
 
+    &.frame-fill {
+      border-radius: 0 !important;
+    }
+
     &.frame-panel {
       --inner-x: var(--space-7);
       --inner-y: var(--space-7);

package/src/components/segment/Section.astro

@@ -6,11 +6,11 @@ type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
   scheme?: 'light' | 'dark'
   color?: 'base' | 'brand'
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  compact?: boolean
   frame?: 'fill' | 'viewport' | 'contain' | 'panel'
   variant?: 'ghost' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
   align?: 'start' | 'center' | 'end'
-  structure?: 'column' | 'split' | 'spread' | 'row'
+  structure?: 'column' | 'split' | 'spread'
+  compact?: boolean
 }
 
 const {

package/src/index.ts

@@ -42,6 +42,7 @@ export { default as Nav } from './components/_archive/Nav.astro'
 export { default as Form } from './components/_todo/Form.astro'
 export { default as Prose } from './components/_todo/Prose.astro'
 export { default as Writeup } from './components/_todo/Writeup.astro'
+export { default as Box } from './components/segment/Box.astro'
 export { default as Card } from './components/segment/Card.astro'
 export { default as Footer } from './components/segment/Footer.astro'
 export { default as Header } from './components/segment/Header.astro'