rizzo-css 0.0.1 → 0.0.3

package/scaffold/svelte/Textarea.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    rows?: number;
+    cols?: number;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    success?: boolean;
+    class?: string;
+    ariaDescribedby?: string;
+    ariaInvalid?: boolean | 'true' | 'false';
+  }
+  let {
+    id,
+    name,
+    value = $bindable(''),
+    placeholder,
+    required = false,
+    disabled = false,
+    readonly = false,
+    rows = 4,
+    cols,
+    size = 'md',
+    error = false,
+    success = false,
+    class: className = '',
+    ariaDescribedby,
+    ariaInvalid,
+  }: Props = $props();
+
+  const sizeClass = size !== 'md' ? `form-input--${size}` : '';
+  const errorClass = error ? 'form-input--error' : '';
+  const successClass = success ? 'form-input--success' : '';
+  const classes = ['form-input', sizeClass, errorClass, successClass, className].filter(Boolean).join(' ').trim();
+  const invalid = error || ariaInvalid === true || ariaInvalid === 'true';
+</script>
+
+<textarea
+  {id}
+  {name}
+  bind:value
+  {placeholder}
+  {required}
+  {disabled}
+  {readonly}
+  {rows}
+  cols={cols}
+  class={classes}
+  aria-invalid={invalid ? 'true' : 'false'}
+  aria-describedby={ariaDescribedby}
+></textarea>

package/scaffold/svelte/Toast.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Alert from './Alert.svelte';
+
+  interface Props {
+    variant?: 'success' | 'error' | 'warning' | 'info';
+    dismissible?: boolean;
+    autoDismiss?: number;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    class?: string;
+    id?: string;
+  }
+
+  let {
+    variant = 'info',
+    dismissible = true,
+    autoDismiss = 5000,
+    position = 'top-right',
+    class: className = '',
+    id,
+  }: Props = $props();
+
+  const positionClass = `toast--${position}`;
+  const classes = ['toast', positionClass, className].filter(Boolean).join(' ').trim();
+</script>
+
+<div class={classes} data-toast-container>
+  <Alert {variant} {dismissible} {autoDismiss} {id}>
+    <slot />
+  </Alert>
+</div>

package/scaffold/svelte/Tooltip.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    text: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    class?: string;
+    id?: string;
+  }
+  let { text, position = 'top', delay = 0, class: className = '', id }: Props = $props();
+
+  const tooltipId = id ?? `tooltip-${Math.random().toString(36).slice(2, 11)}`;
+  const positionClass = `tooltip--${position}`;
+  const classes = ['tooltip', positionClass, className].filter(Boolean).join(' ').trim();
+  const delayStyle = delay > 0 ? `--tooltip-delay: ${delay}ms;` : '';
+</script>
+
+<span class={classes} role="tooltip" id={tooltipId} aria-hidden="true" style={delayStyle}>
+  {text}
+</span>

package/scaffold/svelte/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Svelte components — same BEM classes and design system as Astro.
+ * Import from this file or from individual components.
+ */
+export { default as Button } from './Button.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Divider } from './Divider.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './Breadcrumb.svelte';
+export { default as FormGroup } from './FormGroup.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as CopyToClipboard } from './CopyToClipboard.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { Tab } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export type { AccordionItem } from './Accordion.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export type { MenuItem } from './Dropdown.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Table } from './Table.svelte';
+export type { TableColumn } from './Table.svelte';