@vela-ui/react
Version:
Vela UI React components
221 lines (217 loc) • 7.45 kB
JavaScript
;
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/slider.tsx
var slider_exports = {};
__export(slider_exports, {
Slider: () => Slider,
SliderOutput: () => SliderOutput,
SliderRange: () => SliderRange,
SliderThumb: () => SliderThumb,
SliderTrack: () => SliderTrack
});
module.exports = __toCommonJS(slider_exports);
var import_react = __toESM(require("react"));
var import_react_aria_components = require("react-aria-components");
var import_tailwind_variants = require("tailwind-variants");
// src/lib/context.ts
var React = __toESM(require("react"));
function createContext2(options = {}) {
const {
strict = true,
errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
name
} = options;
const Context = React.createContext(void 0);
Context.displayName = name;
function useContext2() {
var _a;
const context = React.useContext(Context);
if (!context && strict) {
const error = new Error(errorMessage);
error.name = "ContextError";
(_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext2);
throw error;
}
return context;
}
return [Context.Provider, useContext2, Context];
}
// src/components/slider.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var sliderVariants = (0, import_tailwind_variants.tv)({
slots: {
root: "group relative isolate flex touch-none flex-col gap-2",
track: "bg-muted relative grow cursor-pointer rounded-full",
range: "bg-primary absolute rounded-full",
thumb: "border-primary bg-background ring-ring/50 top-[50%] left-[50%] block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4",
output: "text-muted-foreground text-sm"
},
variants: {
orientation: {
horizontal: {
root: "",
track: "w-full",
range: "h-full"
},
vertical: {
root: "",
track: "h-full",
range: "w-full"
}
},
size: {
sm: {
track: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
thumb: "size-4"
},
md: {
track: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
thumb: "size-5"
},
lg: {
track: "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5",
thumb: "size-6"
}
},
isDisabled: {
true: {
track: "cursor-default",
range: "bg-primary/15",
thumb: "pointer-events-none opacity-50"
}
},
isFocusable: {
true: {
thumb: "ring-4 outline-hidden"
}
}
},
defaultVariants: {
size: "md"
}
});
var { root, track, range, thumb, output } = sliderVariants();
var [SliderProvider, useSliderContext] = createContext2({
name: "SliderContext"
});
function Slider({ className, size, children, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.Slider,
{
"data-slot": "slider",
className: (0, import_react_aria_components.composeRenderProps)(
className,
(className2, renderProps) => root({
...renderProps,
className: className2
})
),
...props,
children: (0, import_react_aria_components.composeRenderProps)(children, (children2, { orientation }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderProvider, { value: { orientation, size }, children: children2 }))
}
);
}
function SliderOutput({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.SliderOutput,
{
"data-slot": "slider-output",
className: (0, import_react_aria_components.composeRenderProps)(
className,
(className2, renderProps) => output({
...renderProps,
className: className2
})
),
...props
}
);
}
function SliderTrack({ className, ...props }) {
const { orientation, size } = useSliderContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.SliderTrack,
{
"data-slot": "slider-track",
className: (0, import_react_aria_components.composeRenderProps)(
className,
(className2, renderProps) => track({ ...renderProps, className: className2, orientation, size })
),
...props
}
);
}
function SliderRange({ className, style, ...props }) {
const state = import_react.default.useContext(import_react_aria_components.SliderStateContext);
const { orientation, isDisabled, getThumbPercent, values } = state || {};
const getStyle = () => {
const percent0 = getThumbPercent ? getThumbPercent(0) * 100 : 0;
const percent1 = getThumbPercent ? getThumbPercent(1) * 100 : 0;
if ((values == null ? void 0 : values.length) === 1) {
return orientation === "horizontal" ? { width: `${percent0}%` } : { height: `${percent0}%` };
}
return orientation === "horizontal" ? { left: `${percent0}%`, width: `${Math.abs(percent0 - percent1)}%` } : { bottom: `${percent0}%`, height: `${Math.abs(percent0 - percent1)}%` };
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "slider-range",
style: { ...getStyle(), ...style },
className: range({ orientation, isDisabled, className }),
...props
}
);
}
function SliderThumb({ className, ...props }) {
const { size } = useSliderContext();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.SliderThumb,
{
"data-slot": "slider-thumb",
className: (0, import_react_aria_components.composeRenderProps)(
className,
(className2, renderProps) => thumb({
...renderProps,
className: className2,
size
})
),
...props
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Slider,
SliderOutput,
SliderRange,
SliderThumb,
SliderTrack
});