@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Drawer/index.js

@@ -0,0 +1,3 @@
+export { Drawer } from './Drawer';
+export { default } from './Drawer';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist/esm/components/EmptyState/EmptyState.css

@@ -0,0 +1,138 @@
+/* EmptyState Component Styles - Using Muka Design Tokens */
+
+.muka-emptystate {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--emptystate-container-gap);
+  max-width: var(--emptystate-container-maxWidth);
+  margin: 0 auto;
+  text-align: center;
+}
+
+/* Alignment variants */
+.muka-emptystate--left {
+  align-items: flex-start;
+  text-align: left;
+}
+
+/* Size variants */
+.muka-emptystate--sm {
+  padding: var(--emptystate-container-padding-sm);
+}
+
+.muka-emptystate--md {
+  padding: var(--emptystate-container-padding-md);
+}
+
+.muka-emptystate--lg {
+  padding: var(--emptystate-container-padding-lg);
+}
+
+/* Visual (icon or illustration) */
+.muka-emptystate__visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--emptystate-icon-color);
+  flex-shrink: 0;
+}
+
+.muka-emptystate--sm .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-sm);
+  height: var(--emptystate-icon-size-sm);
+}
+
+.muka-emptystate--md .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-md);
+  height: var(--emptystate-icon-size-md);
+}
+
+.muka-emptystate--lg .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-lg);
+  height: var(--emptystate-icon-size-lg);
+}
+
+.muka-emptystate__visual svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-emptystate__visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Content */
+.muka-emptystate__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-emptystate--left .muka-emptystate__content {
+  align-items: flex-start;
+}
+
+/* Title */
+.muka-emptystate__title {
+  color: var(--emptystate-title-color);
+  margin: 0;
+  font-family: var(--text-heading-h4-fontFamily);
+  font-weight: var(--text-heading-h4-fontWeight);
+  font-size: var(--text-heading-h4-fontSize);
+  line-height: var(--text-heading-h4-lineHeight);
+}
+
+.muka-emptystate--sm .muka-emptystate__title {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-emptystate--lg .muka-emptystate__title {
+  font-family: var(--text-heading-h3-fontFamily);
+  font-weight: var(--text-heading-h3-fontWeight);
+  font-size: var(--text-heading-h3-fontSize);
+  line-height: var(--text-heading-h3-lineHeight);
+}
+
+/* Description */
+.muka-emptystate__description {
+  color: var(--emptystate-description-color);
+  margin: 0;
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+.muka-emptystate--md .muka-emptystate__description {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-emptystate--lg .muka-emptystate__description {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+}
+
+/* Actions */
+.muka-emptystate__actions {
+  display: flex;
+  gap: var(--emptystate-actions-gap);
+  margin-top: var(--emptystate-actions-marginTop);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.muka-emptystate--left .muka-emptystate__actions {
+  justify-content: flex-start;
+}

package/dist/esm/components/EmptyState/EmptyState.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './EmptyState.css';
+import { Button } from '../Button';
+/**
+ * EmptyState Component
+ *
+ * Displays a zero-state UI when no data is available.
+ * Used for empty tables, search results, dashboards, and initial states.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses role="status" for dynamic empty states
+ * - Illustrations marked as decorative (aria-hidden)
+ * - Action buttons fully accessible
+ * - Proper heading hierarchy with title
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+export const EmptyState = ({ title, description, icon, illustration, primaryAction, secondaryAction, size = 'md', align = 'center', className = '', ...props }) => {
+    const emptyStateClasses = [
+        'muka-emptystate',
+        `muka-emptystate--${size}`,
+        `muka-emptystate--${align}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const hasActions = primaryAction || secondaryAction;
+    return (_jsxs("div", { className: emptyStateClasses, role: "status", ...props, children: [(icon || illustration) && (_jsx("div", { className: "muka-emptystate__visual", "aria-hidden": "true", children: illustration || icon })), _jsxs("div", { className: "muka-emptystate__content", children: [_jsx("h3", { className: "muka-emptystate__title", children: title }), description && (_jsx("p", { className: "muka-emptystate__description", children: description }))] }), hasActions && (_jsxs("div", { className: "muka-emptystate__actions", children: [primaryAction && (_jsx(Button, { variant: "primary", size: size, onClick: primaryAction.onClick, iconLeft: primaryAction.icon, children: primaryAction.label })), secondaryAction && (_jsx(Button, { variant: "secondary", size: size, onClick: secondaryAction.onClick, children: secondaryAction.label }))] }))] }));
+};
+export default EmptyState;
+//# sourceMappingURL=EmptyState.js.map

package/dist/esm/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../../components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AACA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAqBnC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,eAAe,EACf,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,QAAQ,EAChB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG;QACxB,iBAAiB;QACjB,oBAAoB,IAAI,EAAE;QAC1B,oBAAoB,KAAK,EAAE;QAC3B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,aAAa,IAAI,eAAe,CAAC;IAEpD,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,QAAQ,KACT,KAAK,aAER,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,CACzB,cAAK,SAAS,EAAC,yBAAyB,iBAAa,MAAM,YACxD,YAAY,IAAI,IAAI,GACjB,CACP,EAED,eAAK,SAAS,EAAC,0BAA0B,aACvC,aAAI,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAM,EAClD,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,8BAA8B,YAAE,WAAW,GAAK,CAC9D,IACG,EAEL,UAAU,IAAI,CACb,eAAK,SAAS,EAAC,0BAA0B,aACtC,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,aAAa,CAAC,IAAI,YAE3B,aAAa,CAAC,KAAK,GACb,CACV,EACA,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,CAAC,OAAO,YAE/B,eAAe,CAAC,KAAK,GACf,CACV,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/esm/components/EmptyState/index.js

@@ -0,0 +1,3 @@
+export { EmptyState } from './EmptyState';
+export { default } from './EmptyState';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/EmptyState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/components/FAB/FAB.css

@@ -0,0 +1,138 @@
+/* FAB (Floating Action Button) Component Styles */
+
+.muka-fab {
+  position: fixed;
+  z-index: 40;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  box-shadow: var(--shadow-level4);
+
+  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-fab:active {
+  transform: scale(0.96);
+  box-shadow: var(--shadow-level3);
+}
+
+.muka-fab:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}
+
+.muka-fab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* ─── Variants ────────────────────────────────────────── */
+
+.muka-fab--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-inverse-default);
+}
+
+.muka-fab--primary:hover:not(:disabled) {
+  background-color: var(--color-action-hover);
+}
+
+.muka-fab--secondary {
+  background-color: var(--color-surface-level3);
+  color: var(--color-text-default-default);
+}
+
+.muka-fab--secondary:hover:not(:disabled) {
+  background-color: var(--color-surface-level2);
+}
+
+/* ─── Sizes (circular by default) ─────────────────────── */
+
+.muka-fab--md {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+}
+
+.muka-fab--lg {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+}
+
+/* ─── Extended (pill shape with label) ────────────────── */
+
+.muka-fab--extended {
+  width: auto;
+  height: auto;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--radius-full);
+}
+
+.muka-fab--extended.muka-fab--lg {
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.muka-fab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.muka-fab__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-fab__label {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+/* ─── Positioning ─────────────────────────────────────── */
+
+.muka-fab--bottom-right {
+  right: var(--spacing-4);
+  bottom: var(--spacing-4);
+}
+
+.muka-fab--bottom-left {
+  left: var(--spacing-4);
+  bottom: var(--spacing-4);
+}
+
+.muka-fab--bottom-center {
+  left: 50%;
+  bottom: var(--spacing-4);
+  transform: translateX(-50%);
+}
+
+.muka-fab--bottom-center:active {
+  transform: translateX(-50%) scale(0.96);
+}
+
+/* Add the iOS home-indicator inset to the bottom offset. */
+.muka-fab:not(.muka-fab--no-safe-area) {
+  bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
+}
+
+/* Lateral safe-area for landscape iPhone with notch. */
+.muka-fab--bottom-right:not(.muka-fab--no-safe-area) {
+  right: max(var(--spacing-4), env(safe-area-inset-right));
+}
+
+.muka-fab--bottom-left:not(.muka-fab--no-safe-area) {
+  left: max(var(--spacing-4), env(safe-area-inset-left));
+}

package/dist/esm/components/FAB/FAB.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { warnMissingA11yProp } from '../../utils/accessibility';
+import './FAB.css';
+/**
+ * FAB — Floating Action Button.
+ *
+ * A circular (or pill-shaped when extended) button positioned over content,
+ * typically used for the primary action on a screen: "Add motorcycle",
+ * "Compose message", etc.
+ *
+ * - `position` controls which screen corner anchors the FAB.
+ * - Provide `label` to render as an **extended FAB** (pill shape with text).
+ * - Safe-area aware by default — won't sit under the iOS home indicator.
+ *
+ * @accessibility
+ * - Requires `aria-label` when used without a visible `label`
+ */
+export const FAB = ({ icon, label, onClick, position = 'bottom-right', variant = 'primary', size = 'md', disableSafeArea = false, 'aria-label': ariaLabel, disabled = false, className = '', }) => {
+    const isExtended = Boolean(label);
+    warnMissingA11yProp('FAB', !isExtended && !ariaLabel, 'Icon-only FAB requires an aria-label.');
+    const classes = [
+        'muka-fab',
+        `muka-fab--${variant}`,
+        `muka-fab--${size}`,
+        `muka-fab--${position}`,
+        isExtended && 'muka-fab--extended',
+        disableSafeArea && 'muka-fab--no-safe-area',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("button", { type: "button", className: classes, onClick: onClick, disabled: disabled, "aria-label": !isExtended ? ariaLabel : undefined, children: [_jsx("span", { className: "muka-fab__icon", "aria-hidden": "true", children: icon }), label && _jsx("span", { className: "muka-fab__label", children: label })] }));
+};
+export default FAB;
+//# sourceMappingURL=FAB.js.map

package/dist/esm/components/FAB/FAB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAB.js","sourceRoot":"","sources":["../../../../components/FAB/FAB.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,WAAW,CAAC;AAkDnB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,GAAG,GAAuB,CAAC,EACtC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,cAAc,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,eAAe,GAAG,KAAK,EACvB,YAAY,EAAE,SAAS,EACvB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAElC,mBAAmB,CACjB,KAAK,EACL,CAAC,UAAU,IAAI,CAAC,SAAS,EACzB,uCAAuC,CACxC,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,UAAU;QACV,aAAa,OAAO,EAAE;QACtB,aAAa,IAAI,EAAE;QACnB,aAAa,QAAQ,EAAE;QACvB,UAAU,IAAI,oBAAoB;QAClC,eAAe,IAAI,wBAAwB;QAC3C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,gBACN,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,aAE/C,eAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAChD,IAAI,GACA,EACN,KAAK,IAAI,eAAM,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAQ,IACnD,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/esm/components/FAB/index.js

@@ -0,0 +1,2 @@
+export { FAB } from './FAB';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/FAB/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/FAB/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC"}

package/dist/esm/components/FileUpload/FileUpload.css

@@ -0,0 +1,259 @@
+/* FileUpload Component Styles */
+
+.muka-fileupload-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+/* Dropzone */
+.muka-fileupload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fileupload-dropzone-gap);
+  padding: var(--fileupload-dropzone-padding-md);
+  background-color: var(--fileupload-dropzone-color-default-background);
+  border: var(--fileupload-dropzone-border-width) dashed var(--fileupload-dropzone-color-default-border);
+  border-radius: var(--fileupload-dropzone-radius);
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  text-align: center;
+  min-height: 120px;
+}
+
+.muka-fileupload:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Size variants */
+.muka-fileupload--sm {
+  padding: var(--fileupload-dropzone-padding-sm);
+  min-height: 80px;
+}
+
+.muka-fileupload--lg {
+  padding: var(--fileupload-dropzone-padding-lg);
+  min-height: 160px;
+}
+
+/* Button variant */
+.muka-fileupload--button {
+  flex-direction: row;
+  min-height: auto;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-style: solid;
+  border-width: var(--border-width-regular);
+  border-radius: var(--border-radius-md);
+}
+
+/* Hover state */
+.muka-fileupload:hover:not(.muka-fileupload--disabled) {
+  background-color: var(--fileupload-dropzone-color-hover-background);
+  border-color: var(--fileupload-dropzone-color-hover-border);
+}
+
+/* Active/drag state */
+.muka-fileupload--active:not(.muka-fileupload--disabled) {
+  background-color: var(--fileupload-dropzone-color-active-background);
+  border-color: var(--fileupload-dropzone-color-active-border);
+}
+
+/* Disabled state */
+.muka-fileupload--disabled {
+  background-color: var(--fileupload-dropzone-color-disabled-background);
+  border-color: var(--fileupload-dropzone-color-disabled-border);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Hidden file input */
+.muka-fileupload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Content container */
+.muka-fileupload__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Upload icon */
+.muka-fileupload__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-3xl);
+  height: var(--size-3xl);
+  color: var(--fileupload-dropzone-color-default-foreground);
+}
+
+.muka-fileupload__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-fileupload--sm .muka-fileupload__icon {
+  width: var(--size-2xl);
+  height: var(--size-2xl);
+}
+
+.muka-fileupload--lg .muka-fileupload__icon {
+  width: var(--size-4xl);
+  height: var(--size-4xl);
+}
+
+/* Text */
+.muka-fileupload__text {
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-size: var(--text-body-md-regular-fontSize);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  line-height: var(--text-body-md-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-fileupload--sm .muka-fileupload__text {
+  font-size: var(--text-body-sm-regular-fontSize);
+}
+
+/* Hint text */
+.muka-fileupload__hint {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--fileupload-dropzone-color-default-foreground);
+}
+
+/* File list */
+.muka-fileupload__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.muka-fileupload__list li {
+  margin: 0;
+  padding: 0;
+}
+
+/* File item */
+.muka-fileupload-item {
+  display: flex;
+  align-items: center;
+  gap: var(--fileupload-item-gap);
+  padding: var(--fileupload-item-padding-y) var(--fileupload-item-padding-x);
+  background-color: var(--fileupload-item-color-default-background);
+  border-radius: var(--fileupload-item-radius);
+}
+
+.muka-fileupload-item--error {
+  background-color: var(--fileupload-item-color-error-background);
+}
+
+.muka-fileupload-item--success {
+  background-color: var(--fileupload-item-color-default-background);
+}
+
+/* Preview/Icon container */
+.muka-fileupload-item__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--fileupload-preview-size);
+  height: var(--fileupload-preview-size);
+  border-radius: var(--fileupload-preview-radius);
+  overflow: hidden;
+  background-color: var(--color-surface-level1);
+}
+
+.muka-fileupload-item__thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.muka-fileupload-item__icon {
+  color: var(--color-text-subtle-default);
+}
+
+/* File info */
+.muka-fileupload-item__info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.muka-fileupload-item__name {
+  font-family: var(--text-body-sm-medium-fontFamily);
+  font-size: var(--text-body-sm-medium-fontSize);
+  font-weight: var(--text-body-sm-medium-fontWeight);
+  line-height: var(--text-body-sm-medium-lineHeight);
+  color: var(--fileupload-item-color-default-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-fileupload-item--error .muka-fileupload-item__name {
+  color: var(--fileupload-item-color-error-foreground);
+}
+
+.muka-fileupload-item__meta {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-fileupload-item__error {
+  color: var(--fileupload-item-color-error-foreground);
+}
+
+.muka-fileupload-item__progress {
+  margin-top: var(--spacing-1);
+}
+
+/* Actions */
+.muka-fileupload-item__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-shrink: 0;
+}
+
+.muka-fileupload-item__status-icon--success {
+  color: var(--color-state-success-foreground);
+}
+
+.muka-fileupload-item__status-icon--error {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-fileupload-item__remove {
+  opacity: 0.7;
+}
+
+.muka-fileupload-item__remove:hover {
+  opacity: 1;
+}