@plexui/ui 0.9.0 → 0.11.0

package/dist/es/components/Card/Card.module.css

@@ -84,7 +84,7 @@
   position: relative;
   min-width: 0;
 }.Title {
-  margin: 0;
+  margin: 0 0 calc(var(--spacing) * 1.5);
   color: var(--card-title-color);
   font-size: var(--card-title-font-size);
   font-weight: var(--card-title-font-weight);
@@ -92,7 +92,7 @@
   letter-spacing: var(--font-heading-xs-tracking);
   text-wrap: balance;
 }.Description {
-  margin: 0;
+  margin: calc(calc(var(--spacing) * 1.5) * -1) 0 0;
   color: var(--card-description-color);
   font-size: var(--card-description-font-size);
   line-height: var(--font-text-sm-line-height);

package/dist/es/components/EmptyMessage/EmptyMessage.module.css

@@ -53,6 +53,7 @@
     --badge-background-color: var(--color-background-danger-soft);
     --badge-text-color: var(--color-text-danger-soft);
   }.Title {
+  margin: 0 0 calc(var(--spacing) * 2);
   color: var(--color-text);
   font-size: var(--font-heading-xs-size);
   font-weight: var(--font-weight-semibold);

package/dist/es/components/Label/Label.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { Label as RadixLabel } from "radix-ui";
+import s from "./Label.module.css";
+export const Label = ({ className, children, ...restProps }) => {
+    return (_jsx(RadixLabel.Root, { className: clsx(s.Label, className), ...restProps, children: children }));
+};
+//# sourceMappingURL=Label.js.map

package/dist/es/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,CAAC,MAAM,oBAAoB,CAAA;AAMlC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAc,EAAE,EAAE;IACzE,OAAO,CACL,KAAC,UAAU,CAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,SAAS,YAChE,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { Label as RadixLabel } from \"radix-ui\"\nimport s from \"./Label.module.css\"\n\nexport type LabelProps = ComponentProps<typeof RadixLabel.Root> & {\n  className?: string\n}\n\nexport const Label = ({ className, children, ...restProps }: LabelProps) => {\n  return (\n    <RadixLabel.Root className={clsx(s.Label, className)} {...restProps}>\n      {children}\n    </RadixLabel.Root>\n  )\n}\n"]}

package/dist/es/components/Label/Label.module.css

@@ -0,0 +1,16 @@
+@layer components {.Label {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 0.5);
+  color: var(--label-color);
+  font-size: var(--label-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: var(--label-line-height);
+  cursor: default;
+}
+
+  .Label:where([data-disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}

package/dist/es/components/Label/index.js

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

package/dist/es/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA","sourcesContent":["export { Label, type LabelProps } from \"./Label\"\n"]}

package/dist/es/components/Progress/Progress.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import { Progress as RadixProgress } from "radix-ui";
+import s from "./Progress.module.css";
+export const Progress = ({ value = null, max = 100, className, ...restProps }) => {
+    const resolved = value == null ? null : Math.max(0, Math.min(max, value));
+    const percentage = resolved == null ? null : (resolved / max) * 100;
+    return (_jsx(RadixProgress.Root, { value: resolved, max: max, className: clsx(s.Root, className), ...restProps, children: _jsx(RadixProgress.Indicator, { className: s.Indicator, style: {
+                transform: percentage == null ? undefined : `translateX(-${100 - percentage}%)`,
+            }, "data-indeterminate": percentage == null ? "" : undefined }) }));
+};
+//# sourceMappingURL=Progress.js.map

package/dist/es/components/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,CAAC,MAAM,uBAAuB,CAAA;AAmBrC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,GAAG,IAAI,EACZ,GAAG,GAAG,GAAG,EACT,SAAS,EACT,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;IACzE,MAAM,UAAU,GAAG,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;IAEnE,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,IACjB,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,YAEb,KAAC,aAAa,CAAC,SAAS,IACtB,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,KAAK,EAAE;gBACL,SAAS,EACP,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,GAAG,GAAG,UAAU,IAAI;aACvE,wBACmB,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GACvD,GACiB,CACtB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport { Progress as RadixProgress } from \"radix-ui\"\nimport s from \"./Progress.module.css\"\n\nexport type ProgressProps = Omit<\n  ComponentProps<typeof RadixProgress.Root>,\n  \"children\"\n> & {\n  /**\n   * Current progress value, between `0` and `max`.\n   * Omit (or pass `null`) for an indeterminate state.\n   */\n  value?: number | null\n  /**\n   * Maximum value.\n   * @default 100\n   */\n  max?: number\n  className?: string\n}\n\nexport const Progress = ({\n  value = null,\n  max = 100,\n  className,\n  ...restProps\n}: ProgressProps) => {\n  const resolved = value == null ? null : Math.max(0, Math.min(max, value))\n  const percentage = resolved == null ? null : (resolved / max) * 100\n\n  return (\n    <RadixProgress.Root\n      value={resolved}\n      max={max}\n      className={clsx(s.Root, className)}\n      {...restProps}\n    >\n      <RadixProgress.Indicator\n        className={s.Indicator}\n        style={{\n          transform:\n            percentage == null ? undefined : `translateX(-${100 - percentage}%)`,\n        }}\n        data-indeterminate={percentage == null ? \"\" : undefined}\n      />\n    </RadixProgress.Root>\n  )\n}\n"]}

package/dist/es/components/Progress/Progress.module.css

@@ -0,0 +1,33 @@
+@layer components {.Root {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: var(--progress-height);
+  background: var(--progress-track-color);
+  border-radius: var(--progress-radius);
+  /* Prevent accidental clipping of the translateX indicator */
+  transform: translateZ(0);
+}.Indicator {
+  width: 100%;
+  height: 100%;
+  background: var(--progress-indicator-color);
+  transition: transform var(--progress-transition-duration) var(--progress-transition-ease);
+}
+
+  /* Indeterminate — sweeping animation */
+  .Indicator:where([data-indeterminate]) {
+    transform: translateX(-100%);
+    animation: progress-sweep var(--progress-indeterminate-duration) ease-in-out infinite;
+    width: 40%;
+  }@keyframes progress-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(150%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+}

package/dist/es/components/Progress/index.js

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

package/dist/es/components/Progress/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA","sourcesContent":["export { Progress, type ProgressProps } from \"./Progress\"\n"]}

package/dist/es/styles/variables-components.css

@@ -102,6 +102,25 @@
     --card-description-color: var(--color-text-tertiary);
     --card-description-font-size: var(--font-text-sm-size);
 
+    /* =============================================
+      Label
+    ============================================= */
+    --label-color: var(--color-text);
+    --label-font-size: var(--font-text-sm-size);
+    --label-font-weight: var(--font-weight-medium);
+    --label-line-height: 1;
+
+    /* =============================================
+      Progress
+    ============================================= */
+    --progress-height: 4px;
+    --progress-radius: var(--radius-full);
+    --progress-track-color: var(--color-background-secondary-soft);
+    --progress-indicator-color: var(--color-text);
+    --progress-transition-duration: var(--transition-duration-basic);
+    --progress-transition-ease: var(--transition-ease-basic);
+    --progress-indeterminate-duration: 1.5s;
+
     /* =============================================
       Separator
     ============================================= */

package/dist/types/components/Label/Label.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+import { Label as RadixLabel } from "radix-ui";
+export type LabelProps = ComponentProps<typeof RadixLabel.Root> & {
+    className?: string;
+};
+export declare const Label: ({ className, children, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Label/index.d.ts

@@ -0,0 +1 @@
+export { Label, type LabelProps } from "./Label";

package/dist/types/components/Progress/Progress.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps } from "react";
+import { Progress as RadixProgress } from "radix-ui";
+export type ProgressProps = Omit<ComponentProps<typeof RadixProgress.Root>, "children"> & {
+    /**
+     * Current progress value, between `0` and `max`.
+     * Omit (or pass `null`) for an indeterminate state.
+     */
+    value?: number | null;
+    /**
+     * Maximum value.
+     * @default 100
+     */
+    max?: number;
+    className?: string;
+};
+export declare const Progress: ({ value, max, className, ...restProps }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export { Progress, type ProgressProps } from "./Progress";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",