@julo-ui/sliders
Version:
A React Slider component that implements input[type='range']
159 lines (146 loc) • 6.37 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/range-slider/components/range-slider-thumb/index.ts
var range_slider_thumb_exports = {};
__export(range_slider_thumb_exports, {
RangeSliderThumb: () => RangeSliderThumb_default
});
module.exports = __toCommonJS(range_slider_thumb_exports);
// src/range-slider/components/range-slider-thumb/RangeSliderThumb.tsx
var import_system2 = require("@julo-ui/system");
// src/styles.ts
var import_react = require("@emotion/react");
var rootSliderCx = import_react.css`
--slider-track-size: 0.5rem;
--slider-thumb-size: 1rem;
width: fit-content;
`;
var rootSliderVerticalTrackCx = import_react.css`
width: var(--slider-track-size);
`;
var rootSliderHorizontalTrackCx = import_react.css`
height: var(--slider-track-size);
`;
var rootSliderTrackCx = import_react.css`
overflow: hidden;
border-radius: var(--corner-3xl);
background-color: var(--colors-neutrals-40);
`;
var rootSliderThumbCx = import_react.css`
z-index: 1;
width: var(--slider-thumb-size);
height: var(--slider-thumb-size);
border-radius: var(--corner-3xl);
background-color: var(--colors-neutrals-10);
box-shadow: var(--shadows-md);
display: flex;
align-items: center;
justify-content: center;
`;
var rootSliderInnerTrackCx = import_react.css`
background-color: var(--colors-primary-30);
height: inherit;
width: inherit;
`;
// src/range-slider/RangeSliderProvider.tsx
var import_context = require("@julo-ui/context");
var [RangeSliderProvider, useRangeSliderContext] = (0, import_context.createContext)({
name: "SliderContext",
hookName: "useRangeSliderContext",
providerName: "<RangeSliderProvider />"
});
// src/range-slider/components/range-slider-thumb/DefaultSliderThumbIcon.tsx
var import_system = require("@julo-ui/system");
// src/range-slider/components/range-slider-thumb/styles.ts
var import_react2 = require("@emotion/react");
var defaultSliderThumbIconCx = import_react2.css`
background-color: var(--colors-primary-50);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--corner-3xl);
`;
var rangeSliderThumbCx = import_react2.css`
cursor: pointer;
`;
// src/range-slider/components/range-slider-thumb/DefaultSliderThumbIcon.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var DefaultSliderThumbIcon = () => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_system.julo.div,
{
className: "julo-range-slider__default-thumb-icon",
__css: defaultSliderThumbIconCx,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.julo.svg, { width: 16, height: 16, viewBox: "0 0 16 16", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_system.julo.path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M6.69559 4.79983C6.69559 4.5877 6.61316 4.38425 6.46644 4.23423C6.31967 4.08425 6.12063 4 5.9131 4C5.70557 4 5.50653 4.08425 5.35976 4.23423L2.22915 7.43423C2.08243 7.58425 2 7.7877 2 7.99983C2 8.21196 2.08243 8.41541 2.22915 8.56543L5.35976 11.7654C5.50737 11.9112 5.70507 11.9918 5.91028 11.99C6.11549 11.9881 6.31179 11.904 6.4569 11.7557C6.60201 11.6074 6.68432 11.4067 6.68611 11.1969C6.68789 10.9872 6.609 10.7851 6.46644 10.6342L3.88916 7.99983L6.46644 5.36543C6.61316 5.21541 6.69559 5.01196 6.69559 4.79983ZM9.30441 11.1999C9.30441 11.412 9.38684 11.6154 9.53356 11.7655C9.68033 11.9154 9.87937 11.9997 10.0869 11.9997C10.2944 11.9997 10.4935 11.9154 10.6402 11.7655L13.7708 8.56545C13.9176 8.41543 14 8.21198 14 7.99985C14 7.78772 13.9176 7.58428 13.7708 7.43425L10.6402 4.23425C10.4926 4.08853 10.2949 4.00789 10.0897 4.00971C9.88451 4.01154 9.68821 4.09567 9.5431 4.244C9.39799 4.39233 9.31568 4.59298 9.31389 4.80273C9.31211 5.01249 9.391 5.21457 9.53356 5.36545L12.1108 7.99985L9.53356 10.6343C9.38684 10.7843 9.30441 10.9877 9.30441 11.1999Z"
}
) })
}
);
};
var DefaultSliderThumbIcon_default = DefaultSliderThumbIcon;
// src/range-slider/components/range-slider-thumb/RangeSliderThumb.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var RangeSliderThumb = (0, import_system2.forwardRef)(
(props, ref) => {
const {
className,
children = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultSliderThumbIcon_default, {}),
index,
sx,
inputProps,
inputRef,
...resProps
} = props;
const { getThumbProps, getInputProps, state } = useRangeSliderContext(
"RangeSliderThumb should be within RangeSlider or RangeSliderProvider"
);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_system2.julo.div,
{
className: (0, import_system2.cx)("julo-range-slider__thumb", className),
sx: {
...children && {
padding: "0.25rem",
width: "fit-content",
height: "auto"
},
...state.orientation === "horizontal" ? { top: "50%", transform: "translateY(-50%);" } : { left: "50%", transform: "translateX(-50%);" },
...sx
},
...getThumbProps({ index, ...resProps }, ref),
__css: [rootSliderThumbCx, rangeSliderThumbCx],
children: [
children,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_system2.julo.input, { ...getInputProps({ index, ...inputProps }, inputRef) })
]
}
);
}
);
RangeSliderThumb.displayName = "RangeSliderThumb";
var RangeSliderThumb_default = RangeSliderThumb;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
RangeSliderThumb
});